vue递归组件

父组件：

<template><div><treeVue :treeData="treeData"></treeVue></div>
</template><script setup lang="ts">
import { reactive } from "vue";
import treeVue from "./tree.vue";interface Tree {name: string,checked: boolean,children?: Tree[]
}const treeData = reactive<Tree[]>([{name: "1",checked: false,children: [{name: "1-1",checked: false,},{name: "1-2",checked: true,},],},{name: "2",checked: false,},{name: "3",checked: false,children: [{name: "3-1",checked: false,children: [{name: "3-1-1",checked: false,},{name: "3-1-2",checked: false,},],},{name: "3-2",checked: false,},],},
]);
</script><style scoped>
</style>

子组件：

<template><!-- 递归组件使用点击事件,需要阻止冒泡 --><div @click.stop="clickTap(item, $event)" class="tree" v-for="item in treeData"><input type="checkbox" v-model="item.checked"><span>{{ item.name }}</span><!-- 可以使用文件名，不需要引入，如果想修改名称的话，需要自定义name --><!-- 第一种 --><tree v-if="item?.children?.length" :treeData="item?.children"></tree><!-- 第二种 --><!-- <aaaaaa v-if="item?.children?.length" :treeData="item?.children"></aaaaaa> --></div>
</template>
<!-- 第二种 -->
<!-- <script lang="ts">
export default {name: 'aaaaaa'
}
</script> -->
<script setup lang="ts">
interface Tree {name: string,checked: boolean,children?: Tree[]
}
defineProps<{treeData?: Tree[]
}>();
const clickTap = (item, e) => {console.log(item);console.log(e.target);
}
</script><style scoped>
.tree {margin-left: 20px;
}
</style>

递归组件可以直接使用组件名称，不需要引入，如需要引入，则定义组件name，使用name名称

第一种，直接使用tree.vue名称引入

<!-- 第一种 -->
<tree v-if="item?.children?.length" :treeData="item?.children"></tree>

第二种，定义name，使用name名称引入

<!-- 第二种 -->
<aaaaaa v-if="item?.children?.length" :treeData="item?.children"></aaaaaa>

<!-- 第二种 -->
<script lang="ts">
export default {name: 'aaaaaa'
}
</script>