vite2+vue3+ts-递归组件的实例

导出树状结构，多用于商品分类效果

<script setup lang="ts">
import DIGUIZI from './DIGUIZI.vue'
import {reactive} from 'vue'
import treeList from '../utils/type'

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

const getItem = (item)=>{
  console.log('fuzujian',item)
}

</script>

<template>
  <div class="menu">
    菜单区域
    <DIGUIZI :data="data" @on-click="getItem"/>
  </div>
</template>

<style scoped>
.menu{width: 200px; border:1px solid #ccc}
</style>

<script setup lang="ts">
import treeList from '../utils/type'
type props={
  data?:treeList[]
}
defineProps<props>()
const emit = defineEmits(['on-click'])
const clickItem = (item:treeList)=>{
  emit('on-click',item)
}
</script>
<template>
  <div class="tree">
    <div @click.stop="clickItem(item)" v-for="(item,index) in data" :key="index">
      {{item.name}}
      <DIGUIZI @on-click="clickItem" v-if="item?.children?.length" :data="item.children"></DIGUIZI>
    </div>
  </div>
</template>
<style scoped>
.tree{margin-left: 10px;}
</style>

/utils/type文件内容：

type treeList = {
    name:string,
    icon?:string,
    children?: treeList[] | []
}

export default treeList

测试后，有效，特此记录一下。