Vue组件嵌套传值

在项目中遇到这样一个场景，有5个层层嵌套的组件，最里面的组件要传一个id到最外面的组件。

解决思路：
首先找到最外面的组件，通过组件注册关系，一层一层找到子组件

task.vue组件内容如下：

import taskTable from '@/components/task/taskTable'
import createTaskDialog from "@/components/task/createTaskDialog";
components: {
    'task-table': taskTable,
    'create-task-dialog': createTaskDialog
},

然后去找taskTable.vue：

import treeTable from "@/components/autoTable/treeTable";
components: {
  treeTable,
},

再去找treeTable.vue：

import treeTableCell from "@/components/autoTable/treeTableCell";
components: {
  treeTableCell,
},

再去找treeTableCell.vue：

import textEditCell from "@/components/autoTable/textEditCell";
components: {
  textEditCell,
},

再去找textEditCell.vue：

<el-dropdown-item @click.native.stop="onEditTASK(item.id)">编辑</el-dropdown-item>
onEditTASK(id) {
  let { href } = this.$router.resolve(
    `/projects/${this.$route.params.id}/editTask/${id}`
  );
  window.open(href, "_blank");
},

好了，textEditCell.vue应该就是最里面获取id的地方了，我们现在确定了组件嵌套关系：
task.vue -> taskTable.vue -> treeTable.vue -> treeTableCell.vue -> textEditCell.vue

我们先从最里面的textEditCell.vue入手，我们把原来的代码注释掉，然后使用$emit向上传值。

onEditTASK(id) {
  // let { href } = this.$router.resolve(
  //   `/projects/${this.$route.params.id}/editTask/${id}`
  // );
  // window.open(href, "_blank");
  this.$emit("taskEdit", id);
},

然后到上一层组件treeTableCell.vue中，通过v-on（@是简写）接收传递过来的参数，用$emit继续向上传递

<text-edit-cell v-if="column.to_field === 'text'"
				@taskEdit="taskEdit"></text-edit-cell>
methods: {
	taskEdit(id) {
      this.$emit("taskEdit", id);
    },
}

继续到上一层treeTable.vue组件中，使用同样的操作

<tree-table-cell :columnList="columnList"
				@taskEdit="taskEdit"></tree-table-cell>
methods: {
	taskEdit(id) {
      this.$emit("taskEdit", id);
    },
}

继续到上一层taskTable.vue中，使用同样的操作

<tree-table ref="requireTable"
			@taskEdit="taskEdit"></tree-table>
methods: {
	taskEdit(id) {
      this.$emit("taskEdit", id);
    },
}

到最外层task.vue组件中，先接收参数，绑定到data上面，再传给需要的组件

<task-table ref="taskTable"
        	@taskEdit="taskEdit"/>
<create-task-dialog :isShow.sync="dialogVisible" 
					:taskId="taskId"></create-task-dialog>
data() {
	return {
		dialogVisible: false,
        taskId: ""
    }
},
watch: {
    /**
     * @description: 弹窗关闭时清空taskId
     */
    dialogVisible(val) {
        if (val == false) {
            this.taskId = "";
        }
    }
},
methods: {
	taskEdit(id) {
      this.taskId = id;
      this.dialogVisible = true;
    },
}