Vue3 中全局组件、基本组件、递归组件的用法详解

配置全局组件

有些组件使用频率非常高，几乎每个页面都在使用，这时候我们可以把它封装成全局组件。

例如，下面封装了一个 A 组件：

<template><div>{{msg}}</div>
</template><script setup lang="ts">
type Props = {msg:string
}
defineProps<Props>()
</script>

注册方法如下：

在 main.ts 中引入组件 A ，然后使用 app 调用 component，第一个参数是组件名称，第二个参数是组件实例（注意：切记不能放到mount 后面，这是一个链式调用）

import { createApp } from 'vue'
import App from './App.vue'
import A from './components/A.vue'const app=createApp(App)
app.component('A',A)
app.mount('#app')

在其他 vue 页面中直接使用即可，无需引入，使用方法如下：

<template><A></A>
</template>

批量注册全局组件

其实就是通过 for 循环遍历一下然后通过 app.component 注册。

配置局部组件

其实就是在一个组件内（A）通过 import 去引入别的组件(B) 。

因为 B 组件只能在 A 组件内使用，所以是局部组件；如果 C 组件想用 B 组件，那么就需要 C 组件也手动 import 引入 B 组件，用法如下：

<script setup lang="ts">
import B from './components/B.vue'
</script><template><div>这是A组件</div><B></B>
</template>

配置递归组件

原理跟我们写 js 递归是一样的，自己调用自己，通过一个条件来结束递归，否则会导致内存泄漏。
这里，假如我们创建的组件是 A.vue，递归组件调用方式如下：

1. 直接使用文件名当组件名，那么递归调用如下:

<template><div><!-- 递归调用 A--><A/></div>
</template>
<script setup lang="ts">
、、、
</script>

2. 在增加一个 script 通过 export 添加 name，那么递归调用如下：

<template><div><!-- 递归调用 A --><RecursiveComponent /></div>
</template><script setup lang="ts">
、、、
</script><script lang="ts">
export default {name:"RecursiveComponent"
}
</script>