一、递归组件的概念
- 递归组件:
递归组件简单来说在组件内使用组件本身。这个在vue
的项目开发中也是比较常见的。对于一些多级的数据嵌套,如果对于每一层数据都进行for
循环嵌套,那会非常繁琐,也很不方便。而如果使用递归组件,就可以一次性解决,嵌套层级简单,可以实现多级列表。
二、递归组件的实现
- 父组件的data数据
name: 'Home'
data () {
return {
list: [{title: '用户管理',
children: [{title: '会员用户',
children: [
{title: '钻石用户'},
{title: '白银用户'},
{title: '黄金用户'}]},
{title: '普通用户'},
{title: '超级用户'}]},
{title: '订单管理',
children: [
{title: '订单列表'},
{title: '退货列表'}]},
{title: '商家管理',
children: [
{title: '普通商家'},
{title: '会员商家'}]},
{title: '权限管理',
children: [
{title: '用户权限'},
{title: '管理员权限'}
]}]
}
},
- 我们可以先进行第一层数据的遍历,对于父组件,先进行绑定
data
中的数据list
,在父组件调用的时候使用:list="list"
,然后子组件通过props
进行接收数据list
,最后通过v-for
进行遍历数据,显示第一个层级的数据。完整代码如下:
<template>
<div>
<div class="item" v-for="(item, index) of list" :key="index">
<div class="item-title border-bottom">
{{ item.title }}
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Detail',
props: {
list: Array
}
}
</script>
<style lang="stylus" scoped>
.item-title
line-height: .8rem
font-size: .32rem
padding: 0 .2rem
.item-children
padding: 0 .2rem
</style
显示效果如下图所示
- 在
vue
中使用递归组件,就是在遍历第一个层级数据的里面,再次使用组件。通过进行v-for
遍历数据,子组件再次绑定数据:list="item.children"
,进行遍历,这样就实现了递归组件,可以实现层层遍历,实现多级列表。完整代码如下:
<template>
<div>
<div class="item" v-for="(item, index) of list" :key="index">
<div class="item-title border-bottom">
{{ item.title }}
</div>
<!-- 递归组件是指在组件内部调用组件自身 -->
<div v-if="item.children" class="item-children">
<detail :list="item.children"></detail>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Detail',
props: {
list: Array
}
}
</script>
<style lang="stylus" scoped>
.item-title
line-height: .8rem
font-size: .32rem
padding: 0 .2rem
.item-children
padding: 0 .2rem
</style>
显示效果如下图所示