十五、Vue项目中递归组件实现多级列表

这次使用递归组件主要实现下面的效果：

递归组件概念

概念：

简单来说就是在组件中内使用组件本身，不过它们只能通过 name 属性来做这件事。
以前一直不太清楚组件里都有一个name属性是干嘛用的，其实name很大的一个用处就是使用递归组件，假设一个组件要用自己的时候，那么就可以通过自己的名字来使用自己。

子组件List.vue引入到父组件Detail.vue中

后端给我们的接口数据往往是类似这样的，这里我简单写了下：

<template>
  <div class="detail">
    <detail-banner></detail-banner>
    <detail-header></detail-header>
    <div class="content">
      <detail-list :list="list"></detail-list>
    </div>
  </div>
</template>

<script>
import DetailBanner from './components/Banner'
import DetailHeader from './components/Header'
import DetailList from './components/List'
export default {
     
     
  name: 'Detail',
  components: {
     
     
    DetailBanner,
    DetailHeader,
    DetailList
  },
  data() {
     
     
    return {
     
     
      list: [
        {
     
     
          title: '成人票',
          children: [
            {
     
     
              title: '成人三馆联票',
              children:[{
     
     
                 title: '成人三馆联票 - 某一连锁店销售'
              }]
            },
            {
     
     
              title: '成人五馆联票',
              children:[{
     
     
                 title: '成人三馆联票 - 某一连锁店销售'
              }]
            }
          ]
        },
        {
     
     
          title: '学生票'
        },
        {
     
     
          title: '儿童票'
        },
        {
     
     
          title: '特惠票'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
     
     
  height: 20rem;
}
</style>

List.vue组件中创建递归组件

<template>
  <div>
    <div class="item" v-for="(item, index) in list" :key="index">
      <div class="item-title border-bottom">
        <span class="item-title-icon"></span>
        {
   
   { item.title }}
         <!-- 当数据中有children属性时，说明他是一个多级菜单，对组件本身进行循环递归 -->
        <div v-if="item.children" class="item-children">
          <detail-list :list="item.children"></detail-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
     
     
  name: 'DetailList',
  props: {
     
     
    list: Array
  }
}
</script>

<style lang="scss" scoped>
.item-title {
     
     
  line-height: 0.8rem;
  font-size: 0.32rem;
  padding: 0 0.2rem;
  .item-title-icon {
     
     
    position: relative;
    left: 0.06rem;
    top: 0.06rem;
    display: inline-block;
    width: 0.36rem;
    height: 0.36rem;
    background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -0.45rem
      no-repeat;
    margin-right: 0.1rem;
    background-size: 0.4rem 3rem;
    line-height: 0.8rem;
  }
}
</style>

完成这些之后，我们在外部父级组件中使用datail-list 组件时，不管我们的数据有多少层嵌套关系，都可以完美的呈现。