遞迴元件就是在元件的模板中呼叫元件自身，需要設定一個條件，否則可能會無線迴圈下去

遞迴元件獲取的資料：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>

效果：