一、背景需求

在頁(yè)面上渲染一個(gè)多級(jí)列表的時(shí)候，數(shù)據(jù)往往也具有多個(gè)層級(jí)
例如：數(shù)組的每個(gè)元素都是一個(gè)對(duì)象，對(duì)象中的value可能是一個(gè)數(shù)組

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

在這種情況下，使用多重循環(huán)的HTML代碼效率并不高，而且會(huì)增加后期維護(hù)的成本
vue提供了一種更好的實(shí)現(xiàn)方式：即遞歸組件

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

遞歸組件，顧名思義，就是在組件內(nèi)部調(diào)用自己
通過(guò)使用 組件的name選項(xiàng) 對(duì)應(yīng)的標(biāo)簽，實(shí)現(xiàn)多重循環(huán)的效果
同時(shí)，在調(diào)用組件自身的時(shí)候，要通過(guò)v-if實(shí)現(xiàn)條件渲染
防止因無(wú)限調(diào)用組件而導(dǎo)致棧溢出

以上面給的數(shù)據(jù)為例，我們希望將 categoryList 渲染為多級(jí)列表
當(dāng)父組件將 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>

若當(dāng)前被循環(huán)的item有children，就遞歸調(diào)用自身，進(jìn)入下一層級(jí)
實(shí)際的效果如下：

image.png