23.组件注册方式

kolane2024-04-21 21:51

组件注册方式

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

全局注册

复制代码

import { createApp } from 'vue'
import App from './App.vue'
import GlobalComponent from "./components/GlobalComponent.vue"


const app = createApp(App);
app.component("GlobalComponent",GlobalComponent)
app.mount('#app');

<template>
  <h3>全局应用组件</h3>
</template>

局部注册

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

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

局部注册需要使用 components 选项

vue 复制代码

<template>
 <GlobalComponent />
</template>
<script>
import GlobalComponent from "./components/GlobalComponent.vue"
export default {
 components:{
  GlobalComponent
  }
}
</script>
<style>
*{
 margin: 0;
 padding: 0;
}
</style>
<style>
*{
 margin: 0;
 padding: 0;
}
</style>