vue使用遞歸組件實現多級列表

一、背景需求

在頁面上渲染一個多級列表的時候，數據往往也具有多個層級
例如：數組的每個元素都是一個對象，對象中的value可能是一個數組

{
 "ret": true,
 "data": {
   "sightName": "大連聖亞海洋世界(AAAA景區)",
   "bannerImg": "",   
   "categoryList": [{
       "title": "成人票",
       "children": [{
         "title": "成人三館聯票",
         "children": [{
           "title": "成人三館聯票 - 某一連鎖店銷售"
         }]
       },{
         "title": "成人五館聯票"
       }]
     }, {
       "title": "學生票"
     }, {
       "title": "兒童票"
     }, {
       "title": "特惠票"
     }]
 }
}

在這種情況下，使用多重循環的HTML代碼效率並不高，而且會增加后期維護的成本
vue提供了一種更好的實現方式：即遞歸組件

二、遞歸組件的概念和使用

遞歸組件，顧名思義，就是在組件內部調用自己
通過使用 組件的name選項 對應的標簽，實現多重循環的效果
同時，在調用組件自身的時候，要通過v-if實現條件渲染
防止因無限調用組件而導致棧溢出

以上面給的數據為例，我們希望將 categoryList 渲染為多級列表
當父組件將 categoryList 傳遞給子組件的 list 變量后：

<template>
  <div>
    <div class="item" v-for="(item, index) of list" :key="index">
      <div class="item-title border-bottom">
        <span class="item-title-icon"></span>
        {{item.title}}
      </div>
      <div v-if="item.children" class="item-children">
        <detail-list :list="item.children"></detail-list>
      </div>
    </div>
  </div>
</template>

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

若當前被循環的item有children，就遞歸調用自身，進入下一層級
實際的效果如下：