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

一、递归组件的概念

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: '管理员权限'}
        ]}]
    }
  },

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

显示效果如下图所示

3. 在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>

显示效果如下图所示