Vue3中通过父子组件实现一个递归组件

通过这个父子组件的传值和属性的定义，还是学到了不少的东西，比如如何在子组件里定义属性的时候，使用ts定义类型，然后让模板页面有代码提示。还有子组件里面怎么实现自己引用自己实现递归？

实现的效果是：

子组件代码：

<template>
  <div v-for="(item, index) in treeData" :key="index" class="treeBox">
    <input type="checkbox" :checked="item.check"><span>{
   
   { item.name }}</span>
    <MyTree v-if="item.children?.length" :tree-data="item.children"></MyTree>
  </div>
</template>

<script setup lang="ts">
interface tree {
  name: string
  check: boolean
  children?: tree[]
}

// 定义普通类型
// defineProps({
//   treeData: {
//     type: Array,
//     default: ()=> [{
//       name:"1-1",
//       check: true,
//       children:[]
//     }]
//   }
// })

// 定义带类型的
defineProps<{
  treeData: tree[]
}>()
</script>

<style scoped>
.treeBox{
  margin-left: 20px;
}
</style>

父组件代码：

<template>
  <div>
    <MyTree :treeData="data"></MyTree>
  </div>
</template>

<script setup lang="ts">
import MyTree from './views/MyTree.vue'
import { ref, reactive } from 'vue'

interface tree {
  name: string
  check: boolean
  children?: tree[]
}

const data = reactive<tree[]>([
  {
    name: '1-1',
    check: false,
    children: [
      {
        name: '1-2',
        check: false,
        children: []
      }
    ]
  },
  {
    name: '2-1',
    check: true,
    children: [
      {
        name: '2-2',
        check: false,
        children: [
          { name: '2-3', check: true },
          { name: '2-4', check: true },
          { name: '2-5', check: true }
        ]
      }
    ]
  },
  {
    name: '3-1',
    check: false,
    children: [
      {
        name: '3-2',
        check: false,
        children: []
      }
    ]
  },
  {
    name: '4-1',
    check: false,
    children: [
      {
        name: '4-2',
        check: false,
        children: []
      }
    ]
  }
])
</script>

<style scoped></style>