vue3递归组件

效果：

1.父组件：

<template>
  <tree :msg="data"></tree>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import tree from '../src/components/Tree.vue'
interface Tree {
  value: string,
  checked:boolean,
  children?:Tree[]
}
const data = reactive<Tree[]>([{
  value: '1111',
  checked: false,
  children: [
    {
      value: '11-11',
      checked: false
    },
    {
      value: '11-22',
      checked: true,
      children: [
        {
          value: '11-22-11',
          checked: false
        },
        {
          value: '11-22-22',
          checked: false
        },
      ]
    },
  ]
}, {
  value: "2222",
  checked: true,
  children: [
    {
      value: '22-11',
      checked: false
    },
    {
      value: '22-22',
      checked: false,
      children: [
        {
          value: '22-22-11',
          checked: false
        },
        {
          value: '22-22-2',
          checked: false
        },
      ]
    },
  ]
},
])
</script>

2.子组件

递归使用的组件名称必须与组件文件名称一致，子组件名为Tree.vue，则使用<Tree></Tree>

<template>
<div class="tree" v-for="item in msg">
    <input type="checkbox" :checked="item.checked"> {{item.value}}
    <Tree v-if="item.children?.length" :msg="item?.children"></Tree>
</div>
</template>
<script setup lang="ts">
// import {ref} from 'vue'
interface Tree {
  value: string,
  checked:boolean,
  children?:Tree[]
}
defineProps<{
    msg?:Tree[]
}>()
</script>
<style scoped>
.tree{
    margin-left: 40px;
    text-align: left;
}
</style>

3.自定义组件名称

3.1自定义name

<test v-if="item.children?.length" :msg="item?.children"></test>
<script lang="ts">
export default{
    name:"test"
}
</script>

3.2安装插件

unplugin-vue-define-options 或其他