Vue导入和注册组件

文章目录环境准备单文件组件SFC细节构建环境和非构建环境缺省导出和命名导出注册方式局部注册全局注册不注册使用动态组件命名总结参考环境Ubuntu 24.04Chrome Version 146.0.7680.164 (Official Build) (64-bit)VSCode 1.109.5npm 11.6.2Vue 3.5.32准备创建一个Vue项目。创建过程略具体可参见https://blog.csdn.net/duke_ding2/article/details/159510007。单文件组件SFCVue推荐每个组件定义在一个单独的.vue文件中这叫做单文件组件Single File ComponentSFC。例如在src目录下创建ButtonCounter.vue文件如下scriptexportdefault{data(){return{count:0}}}/scripttemplatebutton clickcountYou clicked me{{count}}times./button/template该组件实现了“点击按钮计数加1”的功能。在src目录下修改App.vue文件如下scriptimportAAAfrom./ButtonCounter.vue// 导入模块exportdefault{// 注册组件components:{BBB:AAA,// 如果同名则可以简写}}/scripttemplateBBB//template可见先导入模块再注册组件然后就可以使用组件了。注为了方便本例使用了AAA、BBB的命名方式关于命名规范下面有详述。在项目根目录下运行npm run devnpmrun dev然后打开浏览器查看效果每点击一次按钮计数就会加1。细节构建环境和非构建环境上例中使用了构建环境。如果是在非构建环境下则子组件可以以纯JavaScript对象来定义。例如在项目之外创建ButtonCounter.js文件如下exportdefault{data(){return{count:0}},template:button clickcount You clicked me {{ count }} times. /button}注意这是一个纯JS文件不涉及Vue范畴。在项目之外创建index.html如下scriptsrchttps://unpkg.com/vue3/dist/vue.global.js/scriptdividappaaa//divscripttypemoduleimportMyButtonCounterfrom./ButtonCounter.jsVue.createApp({components:{aaa:MyButtonCounter}}).mount(#app)/script注意这里有两段script其中第一段脚本全局引入了Vue而第二段脚本则是引入了其它模块所以其自身也必须是模块。当然也可以把第一段脚本修改一下改为使用模块化方式引入Vue这样就可以把两段脚本合并在一起了。注在非构建环境下使用模块时需要显式加上typemodule。如果是构建环境则无需加上typemoduleVue会自动识别。另由于引入了模块所以无法直接通过file://方式访问同源策略限制只能在web服务器下访问。在VSCode中启动“Five Server”定位到index.html就可以看到效果了缺省导出和命名导出先抛开Vue对JavaScript来说一个模块可以导出default也可以命名导出。例如exportdefault{data(){return{count:123}}}exportconstAAA{data(){return{count:456}}}exportconstPI3.14此例中包含了一个default导出和两个命名导出AAA和PI。相应的要想导入default模块则必须提供一个名字可任意命名而要想导入命名模块则必须使用指定的名字。例如scripttypemoduleimportAAAfrom./test1.js// 导入default模块import{PI}from./test1.js// 导入命名模块import{AAAasBBB}from./test1.js// 导入命名模块并且起了个别名alert(AAA.data().count, PI, BBB.data().count)/script注意在导入default模块时可任意命名而在导入命名模块时只能用指定名字且需要用大括号把名字括起来。另为避免冲突如本例中的AAA可以使用别名AAA as BBB。效果如下在最前面的例子中子组件导出时使用的是export default所以父组件在导入时可以任意命名。不过需要注意的是在Vue的SFC里一定要用export default而不要用命名导出这是因为Vue的编译器只认export default来合并template除非你不用构建环境参见上一节。注册方式局部注册在前面的例子里父组件里注册子组件使用的是“局部注册”方式。scriptimport{MyButtonCounter}from./ButtonCounter.vueexportdefault{components:{BBB:MyButtonCounter,}}/scripttemplateBBB//template局部注册是最常用的方式。全局注册如果子组件要用在多个页面里又不想在每个父组件里都注册一遍则可以考虑全局注册。ButtonCounter.vue不变scriptexportdefault{data(){return{count:0}}}/scripttemplatebuttonclickcountYou clicked me {{ count }} times./button/template打开main.ts如下import./assets/main.cssimport{createApp}fromvueimportAppfrom./App.vuecreateApp(App).mount(#app)修改如下import./assets/main.cssimport{createApp}fromvueimportAppfrom./App.vueimportMyButtonCounterfrom./ButtonCounter.vue// 导入 MyButtonCounter 组件constappcreateApp(App)// 全局注册组件app.component(BBB,MyButtonCounter)app.mount(#app)在App.vue里就可以直接使用BBB组件了如下templateBBB//template注全局注册的组件也都可以在彼此内部使用。不过在Vue的官网https://cn.vuejs.org/guide/components/registration.html里提到全局注册虽然很方便但有以下几个问题全局注册但并没有被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)。如果你全局注册了一个组件即使它并没有被实际使用它仍然会出现在打包后的 JS 文件中。全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时不太容易定位子组件的实现。和使用过多的全局变量一样这可能会影响应用长期的可维护性。相比之下局部注册的组件需要在使用它的父组件中显式导入并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确并且对 tree-shaking 更加友好。所以还是要慎用全局注册。不注册使用动态组件即使不注册子组件父组件也可以通过component这个特殊元素来实现“动态组件”scriptimportAAAfrom./ButtonCounter.vueexportdefault{data(){return{myvar:AAA// 组件名}}}/scripttemplatecomponent:ismyvar//template这种使用场景叫做“动态组件”is属性的值是一个变量或者表达式当其值变化时实现动态切换组件的效果。注意myvar的值可以是字符串也可以是组件名。本例中是组件名Vue可通过组件名直接找到该组件。而假如myvar的值是字符串则必须先注册组件因为Vue需要根据这个字符串在components注册表中查找该组件scriptimportAAAfrom./ButtonCounter.vueexportdefault{components:{AAA},// 必须注册组件data(){return{myvar:AAA// 字符串}}}/scripttemplatecomponent:ismyvar//template注意比较myvar: AAA组件名myvar: AAA字符串所以如果使用字符串方式则必须注册组件。如果使用组合式API则更简单一些script setupimportAAAfrom./ButtonCounter.vue/scripttemplatecomponent:isAAA//template注意本例中的script setup。如果不是组合式API则这种方式无效。总之在动态组件场景里在满足一定条件的情况下无需注册组件。命名推荐使用PascalCase作为组件名的注册格式。当一个字符串由多个单词拼接时常见的格式如下PascalCase每个单词的首字母大写各个单词之间直接拼接。camelCase字符串的首字母小写其它与PascalCase相同kebab-case每个单词的首字母小写各个单词之间用连字符-拼接使用PascalCase作为组件名的注册格式的原因PascalCase是合法的JavaScript标识符容易和原生HTML元素如div区分实际上PascalCase、camelCase、kebab-case是互相兼容的编译后最终都转换成kebab-case。注HTML标签和属性名不区分大小写浏览器会把任何大写的字符解释为小写。总之推荐使用PascalCase风格来给组件命名。总结Vue使用SFC单文件组件使用export default来导出组件使用子组件时分三步走导入、注册、使用优先使用局部注册方式“动态组件”场景下可以不注册组件需满足一定条件推荐使用PascalCase风格来给组件命名参考https://cn.vuejs.org/guide/essentials/component-basics.htmlhttps://cn.vuejs.org/guide/components/registration.html