vue递归组件实现

一枚前端小卡拉米

于 2024-08-12 11:25:36 发布

阅读量39

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/WebZichen/article/details/141126910

版权

效果

在这里插入图片描述

模板代码

<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: "特惠票",
        },
      ],