【vue3入门】-【20】组件注册方式

组件注册方式

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

• 全局注册

在最外层注册一次，在最内层组件都能使用

main.js

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

<template>
  <!--主要要生效Header中的样式，需要删除main.json中默认的main.css样式-->
  <Header />  <!--不需要再次引入，可以直接使用全局的组件-->
  <Main />
  <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>
<style></style>

• 局部注册

在某一个组件内引入，然后再使用，在其他组件中不能被使用，更被推荐使用

全局注册虽然很方便，但是还有一下几个问题；

1. 全局注册，但并没有被使用的组件无法再生产打包时被自动移除（也叫“tree-sharkin”）。如果全局注册了一个组件，即使它没有被实际使用，它仍然会出现在打包后的js文件中
2. 全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件是，不太容易定位子组件的实现。和使用过多的全局变量一样，这可能会影响应用长期的可维护性

局部注册需要使用components选项

以上内容出自
【【2023最新版】Vue3从入门到精通，零基础小白也能听得懂，写得出，web前端快速入门教程】 https://www.bilibili.com/video/BV1Rs4y127j8/?share_source=copy_web&vd_source=94c3d5330a46438059359e8dd2494fe9