vue递归组件的实现

本文链接：https://blog.csdn.net/weixin_43756060/article/details/87786344
vue递归实现图片上的多级菜单

 

 

 

父级组件结构

<template>
  <div>
    <detail-banner @show="showImgEvent"/>
    <detail-header />
    <common-gallary v-if="showImg" :imgs="imgs" @show="showImgEvent"/>
    <div class="container">
      <detail-list :list="list"/>
    </div>
  </div>
</template>

<script>
import DetailBanner from './components/Banner'
import DetailHeader from './components/Header'
import DetailList from './components/List'
import CommonGallary from 'common/gallary/Gallary'
export default {
  components: {
    DetailBanner,
    DetailHeader,
    CommonGallary,
    DetailList
  },
  data () {
    return {
      showImg: false,
      imgs: [
        'https://img1.qunarzz.com/p/tts3/1803/94/28d2b3bc42ef7402.jpg_r_1280x840x90_e87df2c9.jpg',
        'https://img1.qunarzz.com/p/tts1/1803/7a/22c09bdb85651202.jpg_r_1280x840x90_a62d44c2.jpg'
      ],
      list: [{
        title: '成人票',
        children: [{
          title: '成人三馆联票',
          children: [{
            title: '成人三馆联票 - 某一连锁店销售'
          }]
        }, {
          title: '成人五馆联票'
        }]
      }, {
        title: '学生票'
      }, {
        title: '儿童票'
      }, {
        title: '特惠票'
      }]
    }
  },
  methods: {
    showImgEvent (status) {
      this.showImg = status
    }
  }
}
</script>

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

列表子组件

<template>
<div>
  <div class="item" v-for="(item, index) of list" :key="index">
    <div class="itemTitle border-bottom">
      <span class="itemIcon"></span>
      {{ item.title }}
    </div>
    <!-- 当数据中有children属性时，对组件本身进行循环递归 -->
    <div v-if="item.children" class="itemChildren">
      <detail-list :list="item.children"/>
    </div>
  </div>
</div>
</template>

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

<style scoped lang="stylus">
  .itemIcon
    display inline-block
    background-image url(//s.qunarzz.com/vacation_react/detail/better_product.png)
    background-size 100% 100%
    width 66px
    height 20px
    margin-right 10px
  .itemTitle
    line-height 80px
    font-size 32px
    padding 0 20px
  .itemChildren
    padding 0 20px
</style>