vue 组件注册方式

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

全局注册

在main.js文件中可以进行全局注册

import { createApp } from 'vue'
import App from './App.vue'
import Header from "./components/Header.vue"
import Main from "./components/Main.vue"
import Aside from "./components/Aside.vue"

const app= createApp(App)
app.component("Header",Header)
app.component("Main",Main)
app.component("Aside",Aside)
app.mount('#app')

等同于在根vue文件中引用

<template>
<Header />
<Main />
<Aside />
</template>
<script>
import Header from "./components/Header.vue"
import Main from "./components/Main.vue"
import Aside from "./components/Aside.vue"
export default{
  components:{
    Header,
    Main,
    Aside8 
  }
  }
</script>

<style>

</style>

 

局部注册 

注意：在开发过程中建议使用局部注册。

  全局注册，但并没有被使用的组件无法在生产打包时被自动移除(也叫“tree-shaking")。如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的S 文件中

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

<template>
<Header />
<Main />
<Aside />
</template>
<script>
import Header from "./components/Header.vue"
import Main from "./components/Main.vue"
import Aside from "./components/Aside.vue"
export default{
  components:{
    Header,
    Main,
    Aside8 
  }
  }
</script>

<style>

</style>