目录
- 组件递归
- 子组件
- 父组件
组件递归
当要渲染一个目录时,因为可能有嵌套数据,并且组件的层级未知,可以使用组件递归来解决
注意点:
1,使用递归时必须提供 name
,也就是通过组件的 name
递归自己。
2,注意组件事件传递。
举例:
子组件
<template><ul><li v-for="(item, index) in list" :key="index"><span @click="handleClick(item)">{{ item.name }}</span><RecursionList v-if="item.children?.length" :list="item.children" @clickItem="handleClick"/></li></ul>
</template><script>
export default {name: 'RecursionList',props: {list: {type: Array,default: () => []}},methods: {handleClick(item) {this.$emit('clickItem', item)}}
}
</script>
父组件
<template><RecursionList :list="list" @clickItem="getItem" />
</template><script>
import RecursionList from './components/RecursionList.vue'
export default {components: {RecursionList},data() {return {list: [{ name: 'a' }, { name: 'b' }, { name: 'c', children: [{ name: 'ca' }, { name: 'cb' }, { name: 'cc', children: [] }] }]}},methods: {getItem(item) {console.log(item)}}
}
</script>
以上。