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

组件注册方式

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

全局注册

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

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

import { createApp } from 'vue'
import App from './App.vue'

import Header from './pages/Header.vue'

const app=createApp(App)

//在这中间写全局组件的注册
app.component("Header",Header)

app.mount('#app')

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

<template>

<!-- 第三步：显示组件 -->
<!-- <Header></Header> -->
<!-- 使用通过main.js的全局组件注册，显示组件 -->
<Header></Header>
<Main></Main>
<Aside></Aside>
</template>

<script>
//第一步：引入组件
//局部注册方式
// import Header from "./pages/Header.vue";
import Main from "./pages/Main.vue";
import Aside from "./pages/Aside.vue";

//第二步：注入组件
export default{
  components:{
    //局部注册方式
    // Header,
    Main,
    Aside
  }
}

</script>

 

局部注册

在单页面中局部注册组件

<template>
<!-- 第三步：显示组件 -->
<Header></Header>
</template>

<script>
//第一步：引入组件
import Header from "./pages/Header.vue";

//第二步：注入组件
export default{
  components:{
    Header
  }
}
</script>

全局注册和局部注册比较

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

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

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

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