vue 递归组件使用示例

前文

我们需要做一个树形组件用来展示一些无限子级的数据时就要用到vue提供的递归组件
首页了解一下 vue 中 name属性 为什么 export 有name这个属性

name

类型：string
限制：只有作为组件选项时起作用。
详细：
允许组件模板递归地调用自身。 注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。
指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外，当在有 vue-devtools，未命名组件将显示成 ，这很没有语义。通过提供 name 选项，可以获得更有语义信息的组件树。

利用组件循环实现未知限制的数据展示

父级组件 通过这个组件来获取将要展示的无限级数据
tree-list 是用到的的递归组件
使用递归组件时需要给定一个结点 如 v-if=“item.child” 以免陷入无限循环

demo

//demo

tree-list 是用来递归的组件

使用组件循环展示时，非全局引用下必须命名name，
name的解释请回到文章顶部，
在tree-list中引用本身，来实现数据的无限级展示，同样需要给定一个结点

demo

数据传递

在中间中我们通常有一写交互行为，如何获取当前展示的数据
当点击出发时通过$emit(‘row’, item) 向父级传递 row回调，tree-list本身就是自己的子级或是父级，
所以监听emit() 事件名要相同，无论是tree中 还是tree-list中， 包括tree-list中点击出发的名字
最后我们在tree组件中就可以拿到自己想要的数据交互了。 如果tree向上还有父级那么这时emit()事件名则可以与tree-list不同， 因为这已经不再循环组件中了。

总结

在使用循环组件时要做以下几点

1. 保证循环组件有name命名
2. 循环组件要有一个结点，避免无限循环
3. 循环组件事件，因为可能是自己的子级或是父级， 所在emit()响应时 命名需要相同