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

待我称王封你为后i 2022-02-22 13:28 213阅读 0赞

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>

完事