vue 一个简单的项目 之三 详情页面 step5 使用递归组件实现详情页列表

上篇，完成了Header.vue，本篇，我们继续写详情页面。

创建分支 detail-list，pull 下来，在新分支上写代码。

我们在detail/components 目录下，创建一个组件 List.vue 。初始化，如下。

<template>
  <div>list</div>
</template>

<script>
export default {
  name: 'DetailList'
}
</script>

<style lang="stylus" scoped="">

</style>

再在 Detail.vue 中引入。如下。

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

<script>
import DetailHeader from './components/Header'
import DetailBanner from './components/Banner'
import DetailList from './components/List'
export default {
  name: 'Detail',
  components: {
    DetailBanner,
    DetailHeader,
    DetailList
  }
}
</script>

<style lang="stylus" scoped>
  .content
    height: 50rem
</style>

然后，开始写，递归组件。首先在父组件中，把传入的数据写好，如下。

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

<script>
import DetailHeader from './components/Header'
import DetailBanner from './components/Banner'
import DetailList from './components/List'
export default {
  name: 'Detail',
  components: {
    DetailBanner,
    DetailHeader,
    DetailList
  },
  data () {
    return {
      list: [{
        title: '成人票',
        children: [{
          title: '成人三馆联票',
          children: [{
            title: '成人三馆联票 - 月球',
          }]
        }, {
          title: '成人五馆联票'
        }]
      }, {
        title: '学生票'
      }, {
        title: '儿童票'
      },  {
        title: '特惠票'
      }]
    }
  }
}
</script>

<style lang="stylus" scoped>
  .content
    height: 50rem
</style>

然后子组件中递归显示。

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

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

<style lang="stylus" scoped="">
  .item-title
    line-height: .8rem
    font-size: .32rem
    padding:0 .2rem
</style>

Done！