vue3ts 递归组件

递归组件

一般用来做树形组件
父组件中定义数据类型以及data

<script setup lang="ts">
import ZBreadcrumb from './ZBreadcrumb/index.vue';
import ZBreadcrumbItem from './ZBreadcrumbItem/index.vue';
import Tree from './Tree/index.vue'
import {reactive} from "vue";

//定义一个TreeList的数据类型
type TreeList = {
  name:string,
  //其中children属性为一个TreeList类型的数组或者是一个空数组，甚至可以没有
  children?:TreeList[] | []
}

const data = reactive<TreeList[]>([
  {
    name:'no.1',
    children:[
      {
        name:'no1-1',
        children:[
          {
            name:'no1-1-1'
          },
          {
            name:'no1-1-2'
          }
        ]
      }
    ]
  },
  {
    name:'no.2',
    children:[
      {
        name:'no2-1'
      }
    ]
  },
  {
    name:'no.3'
  }
])

const getMsg = (item:TreeList) => {
  console.log(item);
}
</script>

<template>
<!--  <z-breadcrumb>-->
<!--    <z-breadcrumb-item title="zhouzhou"></z-breadcrumb-item>-->
<!--    <z-breadcrumb-item title="zhouzhrweou"></z-breadcrumb-item>-->
<!--    <z-breadcrumb-item title="zhouzwrerwehou" :last="true"></z-breadcrumb-item>-->
<!--  </z-breadcrumb>-->
  <Tree :data="data" @showMsg="getMsg"></Tree>
</template>

<style scoped>

</style>

<template>
<!--  .stop用于停止冒泡-->
  <div @click.stop="showMsg(item)" :key="item.name" v-for="(item,index) in props.data" style="margin: 10px;">
    {{item.name}}
<!--    这里也需要接收事件-->
<!--    使用?.的原因是children是可选参数，不一定有，如果没有的话会报错，但是使用?.会将其转化为undefined-->
<!--    递归组件必须有其结束条件，使用v-if-->
    <tree-item @showMsg="showMsg" v-if="item?.children?.length" :data="item.children"></tree-item>
  </div>
</template>

<script setup lang="ts">
//最好将这个封装一下
type TreeList = {
  name:string,
  //其中children属性为一个TreeList类型的数组或者是一个空数组，甚至可以没有
  children?:TreeList[] | []
}
interface Props{
  data?:TreeList[]
}
const props = defineProps<Props>()
//定义要发射的事件名
const emit  = defineEmits(['showMsg'])
//要发射的事件
const showMsg = (item:TreeList) => {
  emit('showMsg',item)
}
</script>

<!--如果要使用递归组件的话，那么必须将组件暴露出去-->
<script lang="ts">
export default {
  name: "TreeItem"
}
</script>

<style scoped>

</style>

参考：https://blog.csdn.net/qq1195566313