vue巢狀元件傳參

vue父子元件引數傳遞

我們一般使用prop給子元件傳遞引數，在子元件中使用$emit觸發父元件中監聽的事件，並且可以附帶引數。

比如我們封裝了一個名為 NestedDir 的子元件(巢狀目錄的意思)，內容如下(用到了element ui元件)：

<template>
  <ul class="nest_wrapper">
    <li v-for="(el, index) in nested" :key="index">
      <div v-if="el.type ==='dir'" class="dir">
        <p>{{el.name}}</p>
        <div class="btn_group">
          <el-button type="warning" size="mini" @click="add({id: el.id, type: 'dir'})">新增目錄</el-button>
          <el-button type="warning" size="mini" @click="add({id: el.id, type: 'file'})">新增檔案</el-button>
        </div>
      </div>
      <div v-if="el.type ==='file'" class="file">
        <p>{{el.name}}</p>
      </div>
      <NestedDir v-if="el.children" :nested="el.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: "NestedDir",
  props: {
    nested: {
      type: Array,
    }
  },
  methods: {
    add(el) {
      this.$emit('change', el)
    }
  }
}
</script>

可以看出這個 NestedDir 接收父級傳來的 nested 陣列型別的資料，並且它的內部點選 新增目錄、新增檔案，可以觸發 父級 監聽的 change 事件。比較特殊的是這個元件中呼叫了自己：

<NestedDir v-if="el.children" :nested="el.children"/>

因為我們會傳遞給它的 nested 資料結構大概是下面的樣子：

[{
    "id": 1,
    "name": "目錄1",
    "type": "dir",
    "children": [{
        "id": 2,
        "name": "目錄3",
        "type": "dir",
        "children": [],
        "pid": 1
    }, {
        "id": 3,
        "name": "檔案2",
        "type": "file",
        "pid": 1
    }]
}, {
    "id": 4,
    "name": "目錄2",
    "type": "dir",
    "children": []
}, {
    "id": 5,
    "name": "檔案1",
    "type": "file",
    "children": []
}]

父元件中呼叫：

<template>
  <div style="width: 50%;box-shadow: 0 0 4px 2px rgba(0,0,0,.1);margin: 10px auto;padding-bottom: 10px;">
    <!-- 頂部按鈕組 -->
    <div class="btn_group">
      <el-button type="warning" size="mini" @click="showDialog({type: 'dir'})">新增目錄</el-button>
      <el-button type="warning" size="mini" @click="showDialog({type: 'file'})">新增檔案</el-button>
    </div>
    <!-- 巢狀元件 -->
    <NestedDir :nested="catalog" @change="handleChange"/>
    <!-- 新增彈出框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="300px">
      <el-form :model="form">
        <el-form-item label="名稱">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">確 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import NestedDir from "./NestedDir";

export default {
  name: "directory",
  components: {
    NestedDir
  },
  created() {
    this.catalog = this.getTree()
  },
  computed: {
    maxId() {
      return this.arr.lastIndex + 2
    }
  },
  data() {
    return {
      arr: [
        {id: 1, name: '目錄1', type: 'dir', children: []},
        {id: 2, name: '目錄3', type: 'dir', children: [], pid: 1},
        {id: 3, name: '檔案2', type: 'file', pid: 1},
        {id: 4, name: '目錄2', type: 'dir', children: []},
        {id: 5, name: '檔案1', type: 'file'},
      ],
      title: '',
      dialogFormVisible: false,
      form: {
        id: '',
        name: '',
        type: '',
        pid: ''
      },
      catalog: []
    }
  },
  methods: {
    handleChange(el) {
      this.showDialog(el)
    },
    confirm() {
      this.arr.push({...this.form})
      this.dialogFormVisible = false
      this.catalog = this.getTree()
      this.form = {
        id: '',
        name: '',
        type: '',
        pid: ''
      }
    },
    showDialog(el) {
      if (el.type === 'dir') {
        this.title = '新增目錄'
        this.form.children = []
        this.form.type = 'dir'
      } else {
        this.title = '新增檔案'
        this.form.type = 'file'
      }
      if (el.id) {
        this.form.pid = el.id
        this.form.id = this.maxId
      } else {
        this.form.id = this.maxId
      }
      this.dialogFormVisible = true
    },
    getTree() {
      let obj = {}
      this.arr.forEach(item => {
        if (item.pid) {
          obj[item.pid].children.push(item)
        } else {
          item.children = []
          obj[item.id] = item
        }
      })
      return Object.values(obj)
    }
  }
}
</script>

<style scoped>
.btn_group {
  padding: 20px 10px;
  background-color: rgba(87, 129, 189, 0.13);
}
</style>

渲染出的頁面是下面的樣子：

深層遞迴元件事件丟失

這樣我們構造出了一個理論上可以無限巢狀的目錄結構，但是經過測試發現 在二級目錄上的新增按鈕點選是沒有任何反應的，原因是我們在 NestedDir 中呼叫了它自己導致事件丟失，因為它無法觸發父級的父級的監聽事件。

todo 如何解決？

$attrs

$listeners