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>

效果：