Vue递归组件实现树级菜单

递归组件就是在组件的模板中调用组件自身，需要设置一个条件，否则可能会无线循环下去

递归组件获取的数据：detail.json

{"data": {  
    "categoryList": [{
        "level":"one-1",
        "title": "成人票",
        "children": [{
          "level":"two-1",
          "title": "成人旅游联票",
          "children": [{
            "level":"three-1",
            "title": "成人旅游联票 - 多个景点联票"
          }]
        },{
          "level":"two-2",
          "title": "成人酒店联票"
        }]
      }, {
        "level":"one-2",
        "title": "学生票"
      }, {
        "level":"one-3",
        "title": "儿童票"
      }, {
        "level":"one-4",
        "title": "特惠票"
      }]
  }
}

组件模板：

<template>
    <div>
        <div 
         class="item"
         v-for="(item,index) of list"
         :key="index">
          <div class="item-title border-bottom" @click="handleListClick(item.level)">
              <span class="item-title-icon"></span>
              {{item.title}}
          </div>
          <div v-if="item.children"  class="item-children" >  <!-- 如果当前的一级列表下有children ，就将children也显示在二级菜单那里-->
              <detail-list :list="item.children" v-show="levelActive==item.level"></detail-list>
          </div>
        </div>
    </div>
</template>

<script> 相关代码：

<script>
export default {
    name: 'DetailList',
    data(){
        return {
            // showItem:false
            levelActive:'level-0',  // 这里定义一个变量，来方便点击目录时将当前的level赋给他，防止点击目录时，当前层级的目录全部展开
            list:[]
        }
    },
    methods:{
        getDetailInfo(){
            axios.get('/api/detail.json')
            .then(this.handleGetDataSucc)
        },
        handleGetDataSucc (res){
            res = res.data
            if (res.data) {
                const data = res.data
                this.commentList = data.categoryList

            }
        },
        handleListClick(lev){
            const levelA = lev
            if (this.levelActive == levelA) {  
                this.levelActive=""
            }
            // this.showItem=!this.showItem
            this.levelActive = levelA   //点击列表时，level和levelActive设置相同，展开当前点击的目录

　　　　　　// console.log(this.levelActive)  
　　　　} 
　　　},
　　　 mounted(){ this.getDetailInfo() } } </script>

效果：