vue3 --递归组件的使用

—参考zs小满的博客

/*

  父组件中定义数据：
  const list = reactive<Tree[]>([
	  {
	    name: "1",
	    checked: true,
	    children: [
	      {
	        name: "1-1",
	        checked: false,
	      },
	    ],
	  },
	  {
	  	name: "2",
	    checked: false
	  }
  ])

*/
<template>
  <div class="tree" @click.stop="handle(item)" v-for="item in data" :key="item.name">
    <input type="checkbox" v-model="item.checked" />
    <span>{{ item.name }}</span>
    // 此处MyTest为对应的文件名 MyTest.vue
    <MyTest v-if="item?.children?.length" :data="item?.children" />
  </div>
</template>

<script setup lang="ts" >
interface Tree {
  name: string;
  checked: boolean;
  children?: Tree[];
}

// 这里接受props， 注意类型{propName：propType}
defineProps<{
  data?: Tree[];
}>();

const handle = (item:Tree) => {
  console.log(item.name)
}
</script>
<style lang="scss">
.tree {
  margin-left: 10px;
}
</style>

递归时候修改使用的文件名称

方法1: 增加一个script，export name

<script lang="ts">
	export default {
	  name: 'mydefinename'
	}
</script> 

方法2: 使用插件``npm i unplugin-vue-define-options`

1. vite.config.js中注册插件

   import DefineOptions from 'unplugin-vue-define-options/vite'
   // 在defineConfig中添加
   plugins: [vue(),  DefineOptions()]
   

2. tsconfig.node.json中 "types": ["unplugin-vue-define-options/macros-global"],
3. 在使用递归组件的vue文件中，会自动defineOptions({ name: 'xdfdfdf' }) , 则可以使用<xdfdfdf/>标签了