递归组件的用法

先看效果图：

1：先mock数据

//list.js
var list = {
    list: [{
        title: '成人票',
        children: [{
          title: '成人三馆联票'
        },
        {
          title: '成人四馆联票',
          children: [{
            title: '成人四馆联票（一）'
          }]
        }]
      },
      {
        title: '学生票'
      },
      {
        title: '儿童票'
      },
      {
        title: '军人票'
      }]
}
export default list

2:创建组件 a-vue.vue

<template>
   <div>
       <div class="item border-bottom" v-for="(item, index) in list" :key="index">
           <div class="item-title">
               <span class="item-title-icon"></span>
               {{item.title}}<br/>
           </div>
           <div v-if="item.children" class="item-cildren">
               <detail-list :list="item.children"></detail-list>  //通过name进行递归调用
           </div>    
       </div>
   </div>
</template>
<script>
    export default {
        name:'detailList', // name用于组件的递归调用
        props:['list'], //接收父组件传递的prop数据，然后进行循环数据
    }
</script>
<style <style lang="scss" scoped>
.item-cildren {
    .item-title {
        color: red;
        margin-left: 70px;
        }
    .item-cildren {
         .item-title {
             color: green;
              margin-left: 150px;
         }
     }
    }

</style>

3：父组件引用a-vue.vue

<template>
     <div>
          <a-vue :list="list"></a-vue>
     </div>
   
</template>
<script>
import lists from '@/../mock/mock.js'; //引入数据
import aVue from './a.vue'   //引入组件
export default {
    data(){
        return {
            list: lists.list  //注意根据数据的导出格式进行恰当的赋值
        }
    },
    components:{  //组件定义
        aVue
    },
  mounted(){
      console.log({...this.list.list})
  }
}
</script>