vue递归组件实现

父组件

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

<script>
import DetailList from './list'
export default {
  name: 'Detail',
  components: {
    DetailList
  },
  data () {
    return {
      list: [{
        title: '成人票',
        children: [{
          title: '成人档案票',
          children: [{
            title: '成人三观联票-莫以连锁店销售',
            children: [{
              title: '成人档案票',
              children: [{
                title: '成人三观联票-莫以连锁店销售',
                children: [{
                  title: '成人档案票',
                  children: [{
                    title: '成人三观联票-莫以连锁店销售'
                  }]
                }, {
                  title: '陈然三馆联票'
                }
                ]
              }]
            }, {
              title: '陈然三馆联票'
            }
            ]
          }]
        }, {
          title: '陈然三馆联票'
        }
        ]
      }
      ]
    }
  }
}
</script>

<style scoped></style>

子组件 

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

<script>
export default {
  name: 'DetailList',
  props: {
    list: Array
  },
  methods: {
    add (item, index) {
      if (item.children && item.children.length > 0) {
        console.log(item.title)
      }
    }
  }
}
</script>

<style scoped>
.item-title-icon {
  position: relative;
  left: 0.06rem;
  top: 0.06rem;
  display: inline-block;
  width: 0.36rem;
  height: 0.36rem;
  /* background: url('http://s.qunarzz.com/piao/image/touch/sight/detail.png') 0 -0.45rem */
  /* no-repeat; // s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat */
  margin-right: 0.1rem;
  background-size: 0.4rem 3rem;
}

.item-title {
  line-height: 0.8rem;
  font-size: 0.32rem;
  padding: 0 0.2rem;
}

.item-chilren {
  padding: 0 0.2rem;
}
</style>