vue3.0递归组件的使用

以Menu菜单为例
父组件

<script setup lang="ts">
import { watchEffect, ref, reactive, onMounted } from 'vue';
import Tree from '@/components/Tree.vue'

type Tree = {
  name: string,
  children?: Tree[] | []
}
const treeData = reactive<Tree[]>([
  {
    name: '浙江省',
    children: [
      {
        name: '杭州市',
        children: [
          {
            name: '西湖区',
            children: [
              {
                name: '双浦镇'
              }
            ]
          },
          {
            name: '钱塘新区'
          },
          {
            name: '滨江区',
            children: [
              {
                name: '六合街道'
              },
            ]
          }
        ]
      },
    ]
  },
  {
    name: '四川省',
    children: [
      {
        name: '资阳市',
        children: [
          {
            name: '安岳县'
          }
        ]
      },
    ]
  },
  {
    name: '北京市',
    children: []
  }
])

</script>

<template>
    <Tree :treeDate="treeData"></Tree>
</template>

子组件

<script setup lang="ts">
type Tree = {
    name: string,
    children?: Tree[] | []
}
type Props = {
    treeDate?: Tree[]
}
withDefaults(defineProps<Props>(), {
    treeDate: ()=> []
})

</script>
//第二种方式
<script lang='ts'>
export default {
    name: 'TreeItem'
}
</script>
<template>
    <div style="margin-left: 25px;color: aliceblue;" v-for="(tree, index) in treeDate" :key="index">
        ·{{tree.name}}
        //第一种方式 直接写组件名称
        <Tree v-if="tree?.children?.length" :treeDate="tree.children"></Tree>
        //第二种方式 添加组件名称
        <TreeItem v-if="tree?.children?.length ?? []" :treeDate="tree.children"></TreeItem>
    </div>
</template>