目录
- 组件注册
- 局部注册
- 全局注册
- 全局注册示例
- 总结
欢迎关注 『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』 专栏,持续更新中
『未完待续』