vue3递归组件的使用

HelloWorld .vue

<template><div :key="index" v-for="(item,index) in data">{{item}}<!--递归组件自己调用自己--><HelloWorldTtem v-if='item?.children?.length' :data="item.children"></HelloWorldTtem></div>
</template>
<script setup lang="ts">
import { ref,reactive} from 'vue'
import HelloWorldTtem from './HelloWorld.vue'
type TreeList = {name: string;icon?: string;children?: TreeList[] | [];
};
type Props<T> ={data? : T[] | []
}
defineProps<Props<TreeList>>()
</script>

app.vue

<template><div><HelloWorld :data="data"></HelloWorld></div>
</template>
<script setup lang='ts'>
import { ref,reactive,onMounted} from 'vue'
import HelloWorld from './components/HelloWorld.vue'
// 递归组件
// ： 原理跟我们写js递归是一样的 自己调用自己 通过一个条件来结束递归 否则导致内存泄漏
// 定义数据，子组件接受
type TreeList = {name: string;icon?: string;children?: TreeList[] | [];
};
const data = reactive<TreeList[]>([{name: "no.1",children: [{name: "no.1-1",children: [{name: "no.1-1-1",},],},],},{name: "no.2",children: [{name: "no.2-1",},],},{name: "no.3",},
]);</script>
<style scoped lang='scss'>
</style>