Vue - 组件递归

组件递归

当要渲染一个目录时，因为可能有嵌套数据，并且组件的层级未知，可以使用组件递归来解决

注意点：

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>

---

以上。