vue递归组件实现

效果

模板代码

<template>
  <div>
    <div class="item" v-for="item in list" :key="item.title">
      <div class="item-title">
        <span class="item-title-icon"></span>
        {{ item.title }}
      </div>
      <div v-if="item.children" class="item-chilren">
        <DetailList :list="item.children"></DetailList>
      </div>
    </div>
  </div>
</template>

js代码

<script>
export default {
  name: 'DetailList', // 要有命名
  props: {
    list: {
      type: Array
    }
  }
}
</script>

数据

	list: [
        {
          title: "成人票",
          children: [
            {
              title: "成人三馆联票",
              children: [
                {
                  title: "成人三馆联票 - 某一连锁店销售",
                },
              ],
            },
            {
              title: "成人五馆联票",
            },
          ],
        },
        {
          title: "学生票",
        },
        {
          title: "儿童票",
        },
        {
          title: "特惠票",
        },
      ],