vue实现递归组件

最新推荐文章于 2024-06-04 00:47:15 发布

TechWhiz-晓同

最新推荐文章于 2024-06-04 00:47:15 发布

阅读量786

点赞数 13

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_72603435/article/details/136256009

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

父组件：

    <Tree :data="data"></Tree>
import Tree from "@/components/Tree.vue";
const data = reactive([
  {
    name: "1",
    checked: true,
    children: [
      {
        name: "1-1",
        checked: false,
      },
    ],
  },）

子组件：

<template>
  <div class="tree" v-for="item in data" :key="item.name">
    <input v-model="item.checked" type="checkbox" />
    <span>{{ item.name }}</span>
    <Tree v-if="item?.children?.length" :data="item?.children"></Tree>
  </div>
</template>

<script setup>
let props = defineProps({
  data: Array,
});
</script>