前言
最近看项目发现了在菜单展示上面用到了组件的递归,跟函数递归类似,就是组件内部调用自己。
实现
用途
组件递归一般会用到像菜单这样的树形结构,不确定层级时可以通过组件递归实现。
实例
使用页面
<template>
<div>
<my-tree :menu-data="menuData"></my-tree>
</div>
</template>
<script>
import myTree from './recursion.vue';
export default {
components: {
myTree
},
data() {
return {
menuData: [
{
text: '1',
children: [
{
text: '1-2',
children: []
}
]
},
{
text: '2',
children: []
}
]
};
},
methods: {
}
};
</script>
<style scoped lang="scss">
</style>
组件
<template>
<ul>
<li v-for="(item,index) in menuData" :key="index">
<div>{{ item.text }}</div>
<my-tree v-if="item.children.length>0" :menu-data="item.children"></my-tree>
</li>
</ul>
</template>
<script>
export default {
name: 'myTree',
props: {
menuData: {
type: Array,
default: () => []
}
},
data() {
return {
};
},
methods: {
}
};
</script>
效果
注意点
- 组件内部要给组件加上
name
这个属性,否则无法自己调用自己 - 循环层级时要循环
props
属性,v-for="(item,index) in menuData" :key="index"