Vue3 递归组件

<template>
<tree @on-click="getItem" :data="data"></tree>
</template>
<script setup lang='ts'>
import { reactive } from 'vue'
import Tree from '.../Tree.vue'
type TreeList = {
  name: string;
  icon?: string;
  children?: TreeList[] | [];
};
const getItem = (item:TreeList)=>{
  console.log(item,'父组件的item')
}
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>

<template>
  <div style="margin-left:10px;" class="tree">
    <div :key="index" v-for="(item,index) in data">
      <div @click.stop='clickItem(item)'>{{item.name}}
    </div>
    <TreeItem @on-click='clickItem' v-if='item?.children?.length' :data="item.children">		     </TreeItem>
  </div>
  </div>
</template>
<script setup lang='ts'>
type TreeList = {
  name: string;
  icon?: string;
  children?: TreeList[] | [];
};
 
type Props = {
  data?: TreeList[]
};
 
defineProps<Props>();
const emit = defineEmits(['on-click'])
const clickItem = (item:TreeList)=>{
  console.log(item,222)
  emit('on-click',item)
}
  
</script>
<script lang='ts'>
  export default{
    name: 'TreeItem'
  }
</script>