vue|vue 组件递归调用 vue组件递归调用

【vue|vue 组件递归调用】实际项目中，除了基本的树结构，有时还需扩展。如下图层级关系的递归调用，红框中的部分为完全递归组件。

文章图片

父级：
template

js:

//....不完整代码 import secondtree from './dept/childrenteer.vue' //....不完整代码 components:{ secondtree } //....不完整代码

子级：

一些重要的废话放到最后：
1：子组件，即需要递归使用的组件，在js中是要声明name(name:"childrentree")。这样子组件在本身就可以直接使用本身。
2：本例从第二层节点才开始使用递归，所以写发有冗余，可按需精简
3：子组件的事件需要按需区分是要发起仅紧挨着的上层事件（this.$emit('unActiveParent'); ）还是顶层事件（this.$emit('closetopChildren'); ）。可以通过接受的方法名进行区分
4：展开某一节点后，节点子集的顶部，即大括号顶部的话，可以使用：(根据具体场景自行判断是否需要使用$nextTick)