组件注册方式
一个 Vue 组件在使用前需要先被“注册”,这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式:全局注册和局部注册。
全局注册
将09节课程的Header组件进行全局注册演练
在main.js中添加Header.vue组件的注册
1 import { createApp } from 'vue' 2 import App from './App.vue' 3 4 import Header from './pages/Header.vue' 5 6 const app=createApp(App) 7 8 //在这中间写全局组件的注册 9 app.component("Header",Header) 10 11 app.mount('#app')
在App.vue中修改Header组件引用方式
1 <template> 2 3 <!-- 第三步:显示组件 --> 4 <!-- <Header></Header> --> 5 <!-- 使用通过main.js的全局组件注册,显示组件 --> 6 <Header></Header> 7 <Main></Main> 8 <Aside></Aside> 9 </template> 10 11 <script> 12 //第一步:引入组件 13 //局部注册方式 14 // import Header from "./pages/Header.vue"; 15 import Main from "./pages/Main.vue"; 16 import Aside from "./pages/Aside.vue"; 17 18 //第二步:注入组件 19 export default{ 20 components:{ 21 //局部注册方式 22 // Header, 23 Main, 24 Aside 25 } 26 } 27 28 </script>
局部注册
在单页面中局部注册组件
1 <template> 2 <!-- 第三步:显示组件 --> 3 <Header></Header> 4 </template> 5 6 <script> 7 //第一步:引入组件 8 import Header from "./pages/Header.vue"; 9 10 //第二步:注入组件 11 export default{ 12 components:{ 13 Header 14 } 15 } 16 </script>
全局注册和局部注册比较
全局注册虽然很方便,但有以下几个问题:
-
全局注册,但并没有被使用的组件无法在生产打包时被自动移除 。如果你全局注册了一个组件,即使它并没有被实际使用,它仍然会出现在打包后的 JS 文件中。
-
全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时,不太容易定位子组件的实现。和使用过多的全局变量一样,这可能会影响应用长期的可维护性。
相比之下,局部注册的组件需要在使用它的父组件中显式导入,并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确,更加友好。