vue 递归组件使用示例
前文
我们需要做一个树形组件用来展示一些无限子级的数据时就要用到vue提供的递归组件 首页了解一下 vue 中 name属性 为什么 export 有name这个属性
name
类型：string 限制：只有作为组件选项时起作用。 详细： 允许组件模板递归地调用自身。 注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。 指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外，当在有 vue-devtools，未命名组件将显示成 ，这很没有语义。通过提供 name 选项，可以获得更有语义信息的组件树。
利用组件循环实现未知限制的数据展示
父级组件 通过这个组件来获取将要展示的无限级数据 tree-list 是用到的的递归组件 使用递归组件时需要给定一个结点 如 v-if=“item.child” 以免陷入无限循环
demo
//demo
<template>
<ul>
<li v-for="(item,index) in list" :key="index">
<p>{{item.name}}</p>
<treeList @row="handleConsole" :child="item.child" v-if="item.child"></treeList>
</li>
</ul>
</template>
<script>
import treeList from './tree-list'
export default {
components: {treeList},
name: 'tree',
data () {
return {
list: [
{
name: 'name1',
child:[
{
name:'name12',
child:[
{
name:'name123',
child:[
{
name:'name1234'
},
{
name:'name12345'
}
]
},
{
name:'name223'
}
]
},
{
name:'name321',
child:[
{
name:'name322'
},
{
name:'name3233'
}
]
}
]
},
{
name: 'name2',
child:[
{
name:'name12',
child:[
{
name:'name123'
},
{
name:'name123'
}
]
},
{
name:'name123',
child:[
{
name:'name1233'
},
{
name:'name1233'
}
]
}
]
}
]
}
},
methods: {
handleConsole(item){
console.log(item.name, 'tree')
},
},
}
</script>tree-list 是用来递归的组件
使用组件循环展示时，非全局引用下必须命名name， name的解释请回到文章顶部， 在tree-list中引用本身，来实现数据的无限级展示，同样需要给定一个结点
demo
<template>
<ul>
<li v-for="(item,index) in child" :key="index">
<p @click="handleClick(item)">{{item.name}}</p>
<treeList @row="handleConsole" v-if="item.child" :child="item.child"></treeList>
</li>
</ul>
</template>
<script>
import treeList from './tree-list'
export default {
components: {treeList},
name: 'treeList',
props: {
child:Array
},
methods: {
handleClick(item){
this.$emit('row', item)
},
handleConsole(item){
this.$emit('row', item)
},
},
}
</script>数据传递
在中间中我们通常有一写交互行为，如何获取当前展示的数据 当点击出发时通过$emit(‘row’, item) 向父级传递 row回调，tree-list本身就是自己的子级或是父级， 所以监听emit() 事件名要相同，无论是tree中 还是tree-list中， 包括tree-list中点击出发的名字 最后我们在tree组件中就可以拿到自己想要的数据交互了。 如果tree向上还有父级那么这时emit()事件名则可以与tree-list不同， 因为这已经不再循环组件中了。
总结
在使用循环组件时要做以下几点
- 保证循环组件有name命名
- 循环组件要有一个结点，避免无限循环
- 循环组件事件，因为可能是自己的子级或是父级， 所在emit()响应时 命名需要相同
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019年04月16日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
