『VUE』21. 组件注册（详细图文注释）

---

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中

组件注册

组件注册有两种方式：全局注册和局部注册。全局注册只需要注册依次,其他组件可以直接调用无需再次像局部注册一样再次注册,

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

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

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

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

局部注册

就是我们之前使用过的注册方式.局部注册的组件在后代组件中不可用。在这个例子中，ComponentA 注册后仅在当前组件可用，而在任何的子组件或更深层的子组件中都不可用。但是因为全局注册的缺点,我一般还是喜欢用局部

• 在使用 <script setup> 的单文件组件中，导入的组件可以直接在模板中使用，无需注册：

<script setup>
import ComponentA from './ComponentA.vue'
</script><template><ComponentA />
</template>

• 没有使用 <script setup>，则需要使用 components 选项来显式注册：

import ComponentA from './ComponentA.js'export default {components: {ComponentA},setup() {// ...}
}

全局注册

在main.js中

import { createApp } from 'vue'const app = createApp({})app.component(// 注册组件的别名  后面这个名字来调用组件'MyComponent',// 组件的实现,前面导入的组件{/* ... */}
)
createApp(App).mount("#app"); //挂载

全局注册示例

上节课的基础上小例子
main.js中添加全局注册

// import './assets/main.css'import { createApp } from "vue";
import Header from "./page/Header.vue";
import App from "./App.vue";//全局注册区域开始
const app = createApp(App);
app.component("GlobalHeader", Header);
//全局注册区域结束
app.mount("#app"); //挂载

app.vue中注释掉局部引用相关的内容

<template><GlobalHeader /><Main /><Aside />
</template><script>
// import Header from "./page/Header.vue";
import Main from "./page/Main.vue";
import Aside from "./page/Aside.vue";export default {components: {// Header,Main,Aside,},
};
</script><style scoped></style>

header正常显示

---

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2024 mzh

Crated：2024-3-1

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中
『未完待续』

---