vue中递归组件实现多级列表

我就是我 2023-06-26 12:28 21阅读 0赞

**一、递归组件的概念**

1.  **递归组件：**

递归组件简单来说在组件内使用组件本身。这个在`vue`的项目开发中也是比较常见的。对于一些多级的数据嵌套，如果对于每一层数据都进行`for`循环嵌套，那会非常繁琐，也很不方便。而如果使用递归组件，就可以一次性解决，嵌套层级简单，可以实现多级列表。

**二、递归组件的实现**

1.  父组件的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: '管理员权限'}
            ]}]
        }
      },

1.  我们可以先进行第一层数据的遍历，对于父组件，先进行绑定`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

显示效果如下图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]

1.  在`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>

显示效果如下图所示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200101231536540.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200101231551137.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA==,size_16,color_FFFFFF,t_70