vue3中可以直接使用组件文件名来递归组件，常用于页面菜单树的开发

效果图

 父组件

<template>
  <Tree @tree-click="treeClick" :data="data"></Tree>
</template>
<script setup lang="ts">
import Tree from '@/components/treeItem.vue';
import { reactive } from 'vue';
type treeData = {
  name: string,
  icon?: string,
  children?: treeData[] | []
}
const data = reactive<treeData[]>([
  {
    name: '陕西省',
    children: [
      {
        name: '西安市',
        children: [
          {
            name: '长安区',
            children: [
              {
                name: '郭杜镇'
              },
              {
                name: '大学城'
              },
            ]
          },
          {
            name: '雁塔区'
          },
          {
            name: '高新区',
            children: [
              {
                name: '科技园'
              },
            ]
          }
        ]
      },
    ]
  },
  {
    name: '四川省',
    children: [
      {
        name: '成都市',
        children: [
          {
            name: '高新区'
          }
        ]
      },
    ]
  },
  {
    name: '北京市',
    children: []
  }
])
const treeClick = (item:treeData)=>{
  console.log(item);
}
</script>

 子组件

<template>
  <div>
    <div v-for="(item, index) in data" :key="index">
      <div @click.stop="handleTreeItem(item)" style="margin-left: 20px;">
        {{ item.name }}
        <!-- 直接使用文件名即可 -->
        <treeItem @tree-click="handleTreeItem" v-if="item?.children?.length" :data="item.children"></treeItem>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
type treeData = {
  name: string;
  icon?: string;
  children?: treeData[] | [];
};
type Props = {
  data: treeData[]
}

defineProps<Props>();

const emit = defineEmits(['tree-click'])

const handleTreeItem = (item:treeData)=>{
  emit('tree-click',item);
}

</script>