步骤

1.创建一个父子组件传递（包含children）

2.在子组件内使用相同的名称，创建组件

3.可使用不同的方法（规定递归组件名称）

父组件

<template>
  <Tree :data="data"></Tree>
</template>

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

interface Tree {
  name: string,
  checked: boolean,
  children?: Tree[]
}
const data = reactive<Tree[]>([
  {
    name: '1',
    checked: true,
    children: [{
      name: '1-1',
      checked: false
    }]
  },
  {
    name: '2',
    checked: false
  },
  {
    name: '3',
    checked: false,
    children: [
      {
        name: '3-1',
        checked: false
      },
      {
        name: '3-2',
        checked: true
      }
    ]
  }
])
</script>

子组件

注：递归组件需要阻止冒泡

<template>
	<!-- 递归组件需要阻止冒泡 -->
	<div @click.stop="clikcTap(item)" class="tree" v-for="item in data">
		<input type="checkbox" v-model="item.checked"><span>{{ item.name }}</span>
		<!-- 方法一：直接使用文件名称：Tree进行递归 -->
		<Tree v-if="item?.children?.length" :data="item?.children"></Tree>
		<!-- 方式二:重命名麻烦 -->
		<!-- <chaozai v-if="item?.children?.length" :data="item?.children"></chaozai> -->
	</div>

</template>

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

interface Tree {
	name: string,
	checked: boolean,
	children?: Tree[]
}

defineProps<{ data?: Tree[] }>()

const clikcTap = (item) => {
	console.log(item);

}

</script>


<!-- 方法二：重命名进行递归 -->
<!-- <script lang="ts">
export default {
	name: 'chaozai'
}
</script> -->


<style scoped>
.tree {
	margin-left: 10px;
}
</style>