Vue2.5 学习笔记 9.5递归组件的使用

1. 展示多级列表数据（多层JSON数据的时候就会用到组件递归调用。不然每个都写一次for 会恶心死的）

 

先新建个list组件：

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

<script>
import DetailBanner from './components/Banner'
import DetailHeader from './components/Header'
// 这里
import DetailList from './components/List'
export default {
  name: 'Detail',
  components: {
    DetailBanner,
    DetailHeader,
// 这里
    DetailList
  },
// 这是原始数据 需要呈现到页面上的（仿JSON数据 三层）
  data () {
    return {
      list: [{
        title: '成人票',
        children: [{
          title: '成人三馆联票',
          children: [{
            title: '成人三馆联票 - 某一连锁店销售'
          }]
        }, {
          title: '成人五馆联票'
        }]
      }, {
        title: '学生票'
      }, {
        title: '儿童票'
      }, {
        title: '特惠票'
      }]
    }
  }
}
</script>

List.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>
// 主要是这里：大体意思是先判断是否有children这个key。然后将子列表传到list变量中，替代原来的list。 这里可以用<detail-list>的原因是 下面有设置export default中设置的name名字
      <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>

<style lang="stylus" scoped>
// 这个icon是从去哪儿网那边复制的样式 
  .item-title-icon
    position: relative
    left: .06rem
    top: .06rem
    display: inline-block
    width: .36rem
    height: .36rem
    background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat
    margin-right: .1rem
    background-size: .4rem 3rem
  .item-title
    line-height: .8rem
    font-size: .32rem
    padding: 0 .2rem
// 增加左内边距来假装是子菜单= =
  .item-children
    padding: 0 .2rem
</style>

完事