局部组件

应用场景：在项目中，一个页面存在多个模块，这些模块不想只在一个页面使用，这些模块就可以拆分成局部组件

先在components创建组件，页面中引入(import)即可，不需要注册,可复用的

<template>
<Water></Water>
<Water></Water>
</template>

<script setup lang="ts">
import Water from './components/water.vue';
</script>

全局组件

应用场景：在一个项目出现频率比较高的一个业务组件，这时候就可以弄成全局组件

注册全局组件，需要在main.ts中引入，app.component有两个参数第一个是自定义的组件名称，第二个是我们引入组件的名称，在这里注册完就可以vue中全局使用了，想批量注册的话，循环注册即可

import CardVue from './components/Card.vue'

export const app = createApp(App)

app.component('Card',CardVue)

递归组件

应用场景：比如tree结构，后台的菜单这时候就可以使用递归组件

先准备tree结构的mock数据，类似于下面这种

interface Tree {
  name: string,
  checked: boolean,
  children?: Tree[]
};
const data = reactive<Tree[]>([
  {
    name: '小石1',
    checked: false,
    children:[
      {
        name: '1-1',
        checked: false
      }
    ]
  },
  {
    name: '小石2',
    checked: false,
  }
])

父组件将定义的mock数据传给子组件

 <Tree :data="data"></Tree>

子组件用宏函数defineProps接收父组件传过来的值，将获取的数据渲染到dom

//接收
interface Tree {
  name: string,
  checked: boolean,
  children?: Tree[]
};
defineProps<{
  data?: Tree[]
}>()

//渲染tree结构数据
<div v-for="item in data">
  <input v-model="item.checked" type="checkbox"><span>{{ item.name }}</span>

</div>

此时我们已经获取到tree结构数据的第一层，这里我们将使用递归组件的方式去结构

递归的第一个条件就是要确认递归组件的一个名称，在V3中可以直接使用这个文件名来当组件的名称，可以在定义一下 script 通过name定义这个组件的名称，就是需要在写一个script，比较繁琐；也可以安装插件unplugin-vue-define-options，非常方便

 <Card v-if="item.children?.length" :data="item.children"></Card>

Vue3组件(局部、全局、递归)

局部组件

全局组件

递归组件