12-2-Detail组件开发-递归组件

使用递归组件实现详情页列表

1.Detail组件中
父组件中定义要显示的列表页数据list,并动态绑定到detail-list子组件上

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

 data () {
    return {
      list: [
        {title: '成人票', children: [{title: '成人三馆联票'}, {title: '成人五馆联票'}]},
        {title: '学生票'},
        {title: '儿童票'}
      ]
    }
  }

2.List组件中
在detail-list子组件中，list数据中有chileren 时通过递归实现展示，在detail-list中包含detail-list

<template>
  <div>
    <div class="item" v-for="(item, index) in 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-chilren">
        <detail-list :list="item.children"></detail-list>
      </div>
    </div>
  </div>
</template>

export default {
  name: 'DetailList',
  props: {
    list: Array
  }
}