10：vue3 组件注册方式（全局注册和局部注册）

组件注册方式

一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。

全局注册

将09节课程的Header组件进行全局注册演练

在main.js中添加Header.vue组件的注册

 1 import { createApp } from 'vue'
 2 import App from './App.vue'
 3 
 4 import Header from './pages/Header.vue'
 5 
 6 const app=createApp(App)
 7 
 8 //在这中间写全局组件的注册
 9 app.component("Header",Header)
10 
11 app.mount('#app')

在App.vue中修改Header组件引用方式

 1 <template>
 2 
 3 <!-- 第三步：显示组件 -->
 4 <!-- <Header></Header> -->
 5 <!-- 使用通过main.js的全局组件注册，显示组件 -->
 6 <Header></Header>
 7 <Main></Main>
 8 <Aside></Aside>
 9 </template>
10 
11 <script>
12 //第一步：引入组件
13 //局部注册方式
14 // import Header from "./pages/Header.vue";
15 import Main from "./pages/Main.vue";
16 import Aside from "./pages/Aside.vue";
17 
18 //第二步：注入组件
19 export default{
20   components:{
21     //局部注册方式
22     // Header,
23     Main,
24     Aside
25   }
26 }
27 
28 </script>

局部注册

在单页面中局部注册组件

 1 <template>
 2 <!-- 第三步：显示组件 -->
 3 <Header></Header>
 4 </template>
 5 
 6 <script>
 7 //第一步：引入组件
 8 import Header from "./pages/Header.vue";
 9 
10 //第二步：注入组件
11 export default{
12   components:{
13     Header
14   }
15 }
16 </script>

全局注册和局部注册比较

全局注册虽然很方便，但有以下几个问题：

1. 全局注册，但并没有被使用的组件无法在生产打包时被自动移除 。如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的 JS 文件中。

2. 全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时，不太容易定位子组件的实现。和使用过多的全局变量一样，这可能会影响应用长期的可维护性。

 相比之下，局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确，更加友好。