vue-------实现递归组件

父组件:

<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>