vue递归组件使用

父组件Detail

<template>    
   <detail-list :list="list"></detail-list>
</template>

<script>
import DetailList from './components/List'
export default{
  name:'Detail',
  components:{
    DetailList
  },
  data(){
    return{
      list:[
        {
        title:'成人票',
          children:[{
            title:'成人三馆联票',
            children:[{
              title:'成人三馆联票'
            }]
          },
          {
            title:'成人五馆联票'
          }
          ]
        },
        {
        title:'儿童票',
        },
        {
        title:'学生票',
        }
      ]
    }
  }
   
}
</script>

List子组件

<template>
  <div>
      <div class="item"
        v-for="(item,index) of list"
        :key="index"
        >
        <div class="item-title">
          <span class="item-title-icon"></span>
          <span class="item-text"> {{item.title}}</span>
        </div>

        <!-- 递归元素，子元素 -->
        <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
  }
}