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>