vue筆記 遞歸組件的使用

遞歸組件

什么是遞歸組件？

組件自身去調用組件自身。

代碼示例

DetailList.vue(子組件-遞歸組件)

<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>
      <!--遞歸組件：DetailList調用自身-->
      <div v-if="item.children" class="item-children">
        <detail-list :list="item.children"></detail-list>
      </div>
 
    </div>
  </div>
</template>

Detail.vue（父組件）

<template>
  <div>
    <detail-banner></detail-banner>
    <detail-header></detail-header>
    <div class="content">
      <detail-list :list="list"></detail-list>
    </div>
  </div>
</template>

 

<script>
  import DetailBanner from './components/Banner.vue'
  import DetailHeader from './components/Header.vue'
  import DetailList from './components/List.vue'
  export default{
    name: 'Detail',
    components: {
      DetailBanner,
      DetailHeader,
      DetailList
    },
    data(){
      return {
        list: [{
          title: '成人票',
          children: [{
            title: '成人3館聯票',
            children: [{title: '成人3館聯票-成都'}, {title: '成人3館聯票-上海'}, {title: '成人3館聯票-北京'}, {title: '成人3館聯票-河南'}]
          }, {
            title: '成人4館聯票'
          }, {
            title: '成人5館聯票'
          }, {
            title: '成人6館聯票'
          }]
        }, {
          title: '學生票'
        }, {
          title: '兒童票'
        }, {
          title: '特惠票'
        }]
      }
    }
  }
</script>

注意：父組件中的數據結構是二維數組。子組件調用自身之后，對於css樣式，我們只要僅僅關注一級列表即可，二級列表會自動使用相同的樣式。如圖：