大家好，我是DX3906
🌈 欢迎莅临我的个人主页 👈这里是我静心耕耘大前端领域、真诚分享知识与智慧的小天地！🎇
前面和大家分享了《如何从零开始创建一个 Vue 应用》
《VUE模板语法(超详细讲解)》
《一文向您详细介绍~Vue响应式基础（选项式API）》
《一文向您详细介绍~Vue计算属性computed（选项式API）》
《一文向您详细介绍~Class类 与 Style样式 绑定（选项式API）》
《一文向您详细介绍~条件渲染（选项式API）》
《一文向您详细介绍~列表渲染（选项式API）》
《一文向您详细介绍~事件处理v-on（选项式API）》
《一文向您详细介绍~模板引用ref（选项式API）》
《一文向您详细介绍~侦听器watch》
今天和大家共同学习一下Vue基于组合式API的组件注册
背景
一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。
全局注册
我们可以使用 Vue 应用实例的 .component() 方法，让组件在当前 Vue 应用中全局可用。
import { createApp } from 'vue'
const app = createApp({})
app.component(
// 注册的名字
'MyComponent',
// 组件的实现
{
/* ... */
}
)如果使用单文件组件，你可以注册被导入的 .vue 文件：
import MyComponent from './App.vue'
app.component('MyComponent', MyComponent).component() 方法可以被链式调用：
app
.component('ComponentA', ComponentA)
.component('ComponentB', ComponentB)
.component('ComponentC', ComponentC)全局注册的组件可以在此应用的任意组件的模板中使用：
<!-- 这在当前应用的任意组件中都可用 -->
<ComponentA/>
<ComponentB/>
<ComponentC/>所有的子组件也可以使用全局注册的组件，这意味着这三个组件也都可以在彼此内部使用。
局部注册
全局注册虽然很方便，但有以下几个问题：
-
全局注册，但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的 JS 文件中。
-
全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时，不太容易定位子组件的实现。和使用过多的全局变量一样，这可能会影响应用长期的可维护性。
相比之下，局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确，并且对 tree-shaking 更加友好。
局部注册需要使用 components 选项：
<script>
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
}
}
</script>
<template>
<ComponentA />
</template>对于每个 components 对象里的属性，它们的 key 名就是注册的组件名，而值就是相应组件的实现。上面的例子中使用的是 ES2015 的缩写语法，等价于：
export default {
components: {
ComponentA: ComponentA
}
// ...
} 请注意：局部注册的组件在后代组件中不可用。在这个例子中，ComponentA 注册后仅在当前组件可用，而在任何的子组件或更深层的子组件中都不可用。
结语
🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~
![[MRCTF2020]pyFlag(详解附送多个python脚本)](https://i-blog.csdnimg.cn/direct/f5029031e51d4e19b6bee480411212d8.png)
