vue3全局和局部组件 和递归组件 setup

全局组件 (在main.ts)

import { createApp } from 'vue'
import './style.css'
import  card from './components/card/index.vue'
import ceshi from './components/ceshi/index.vue';

import App from './App.vue'

createApp(App).component('card',card).component('ceshi',ceshi).mount('#app')

使用：

局部组件直接导入 标签直接使用

递归组件(就是在当前的文件下调用当前的文件进行绑定标签)
父组件

<template>
    <div>
        <tree :data="data"  @onckickmenu="onckickmenu"></tree>
    </div>
</template>

<script setup lang="ts">
import  {reactive}  from 'vue'
import  tree  from '../../components/Tree/index.vue'
    type TreeList={
        name:string,
        icon?:string,
        children?:TreeList[] |[]
    }
    const  data=reactive<TreeList[]>([
        {name:'no.1',
         children:[
             {
              name:'no.1-1',
              children:[
                 {
                   naame:'no.1-1-1',
                }
        
             ]
             } 
        ]
        
        },
        {
            name:'no.2',
            children:[
                {name:'no.2-1'}
            ]
        },
         {
            name:'no.3',
              children:[
                {name:'no.3-1'},
                {name:'no.3-2'},
            ]
        }
    ])

    const  onckickmenu=(value:TreeList)=>{
        console.log(value)
    }
</script>

<style scoped  >
</style>

Tree.vue 子组件

<template>
    <div>
         <div class="" @click.stop="clickitem(item)" style="margin-left:10px"
          v-for="(item,index)  in data" :key="index">
             {{item.name}}
             <!-- item?.children?.length  没有返回undefined  item.children.length  没有会报错 -->
             <TreeItem  @onckickmenu="clickitem" :data="item.children"
               v-if="item?.children?.length"></TreeItem>
         </div>
    </div>
</template>

<script setup lang="ts">
import {reactive, defineProps, defineEmits} from 'vue';
import  TreeItem from './index.vue';//引用自己的组件
const  emit= defineEmits(['onckickmenu']) 
  type TreeList={
        name:string,
        icon?:string,
        children?:TreeList[] |[]  //children里面还可能是该内容
    }
 type Props={
     data:TreeList[]
 }
 defineProps<Props>();
const  clickitem=(value:TreeList)=>{
    emit('onckickmenu',value)
}
</script>
<script   lang="ts">
export  default{
    name:'TreeList'
}
</script>


<style scoped>

</style>