Recursive components to achieve vue

This link: HTTPS: //blog.csdn.net/weixin_43756060/article/details/87786344
VUE recursive multi-level menus on the picture

 

 

 

Parent component architecture

<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: to 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: ' adult ticket ' , 
        Children: [{ 
          title: ' adult three Hall ticket ' , 
          Children: [{ 
            title: 'three Halls adult ticket - a chain store sales' 
          }] 
        }, {
          title: 'adult five Hall ticket'
        }] 
      }, { 
        Title: 'student tickets' 
      }, { 
        title: 'tickets for children' 
      }, { 
        title: 'preferential votes' 
      }] 
    } 
  }, 
  Methods: { 
    showImgEvent (Status) { 
      the this .showImg = Status 
    } 
  } 
}
 </ Script> 

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

A list of sub-assembly

<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>