vue3.0 CLI - 2.6组件的复用入门教程

　　

我的github地址- vue3.0Study阶段学习成果都会建立分支。

　　

==========================

　　

　　

这个基础组件,是导航条中可以复用的基础组件单个导航。

　　

基础组件【导航组件】基础的功能是能够显示文字,单击的交互方式。明确任务目标之后,进行开发。

　　

在组件目录下新建基地目录,基础下新建文件TopNav.vue。加入如下代码:

　　 　　 　　& lt; template> 　　& lt; div类=皌opnav”比; 　　{{标题}} 　　& lt;/div> 　　& lt;/template> 　　& lt; script> 　　出口默认{ 　　名称:“topnav”, 　　道具:['标题'), 　　数据:函数(){返回{ 　　文本:“导航条” 　　}} 　　} 　　& lt;/script> 　　 　　

在。vue中加入以下红色部分的代码:

　　 　　 　　& lt; template> 　　& lt; div类="对"比; 　　& lt;顶部导航title=巴萍觥?比; 　　& lt; HelloWorld味精=" vue官方相关资料的链接”/比; 　　& lt;/div> 　　& lt;/template> 　　& lt; script>//@别名/src 　　从“@/组件/导入HelloWorld HelloWorld.vue” 　　从“@/组件/导入TopNav基地/TopNav.vue ' 　　出口默认{ 　　名称:“回家”, 　　组件:{ 　　HelloWorld, TopNav 　　} 　　} 　　& lt;/script> 　　 　　

通过以上两步,就在。vue中引入新组件TopNav。其实HelloWorld也是可以复用的。

　　

所谓的复用是啥意思呢?如下:

　　
　　

& lt;顶部导航title=巴萍觥?祝辞
　　& lt;顶部导航title=熬?/祝辞
　　& lt;顶部导航title=吧缁帷?祝辞
　　& lt;顶部导航title=翱萍肌?祝辞

　　 　　

这既是所谓的复用啦。标题是TopNav。vue的道具属性中的内容。以上看的出,道具是一个数组,里边每个元素,是一个将要从父组件中传递过来的【变量】,对,变量,就是这么理解。

　　

上篇文章提到过全局注册和局部注册;这个例子,是【局部注册组件】。在把它变为【全局注册组件】之前,先git推一下。

　　

好的,在变【全局】之前,有个问题:全局和局部有什么区别?

　　

上面的例子看见了,要用HelloWorld或TopNav,必须先导入。而全局的,不导入用。

　　

　　

任何模块(这时候把组件理解为模块)不可能不用进口就可以用,全局注册组件,只是在主要。js中进行导入,然后通过Vue.component (params)这个函数进行全局注册。

　　

所以全局注册组件也并不神秘,在主要。js加入如下代码:

　　 　　 　　从“@ component/进口TopNav基地/TopNav ' 　　Vue.component (TopNav, TopNav) 　　 　　

注意:<代码> Vue.component (TopNav, TopNav) 必须在,<代码>新Vue({路由器、存储、呈现:h=比;h (App)})。山美元(#应用)> 　　

然后去掉。vue中TopNav。vue的引入:

　　 　　 　　& lt; template> & lt; div类=肮赜凇北? 　　& lt;顶部导航title=巴萍觥?比; 　　& lt;顶部导航title=熬隆?比; 　　& lt;顶部导航title=吧缁帷?比; 　　& lt;顶部导航title=翱萍肌?比; 　　& lt; HelloWorld味精=" vue官方相关资料的链接”/比; 　　& lt;/div> & lt;/template> 　　& lt; script>//@别名/src 　　从“@/组件/导入HelloWorld HelloWorld.vue”//导入TopNav从“@/组件/基地/TopNav.vue” 　　出口默认{ 　　名称:“回家”, 　　组件:{ 　　HelloWorld 　　} 　　} 　　& lt;/script> 　　 　　

运行代码,可以发现并未报的错。

　　

这就是全局注册。还是有个问题,大型项目基础组件多起来,这主要。js便不好看。下面介绍的方法可以只用数十行代码,就可以解决。

　　

首先引入两个lodash模块:

　　 　　 　　从“进口upperFirst lodash/upperFirst ' 　　从“进口camelCase lodash/camelCase ' 　　 　　

通过以下代码可以找到包含基础模块的所有文件:

　　 　　 　　const requireComponent=require.context (/*在。/组件/基地文件夹中寻找基础模块*/薄?组件/基地”,/*是否包含子文件夹*/真的,/*只要是.vue结尾的文件都是基础模块*//(\ w -) + \ .vue/美元 　　) 　　 　　

下一步便是遍历进行模块进口:

　　 　　/*对这个文件集合进行遍历-进口全局注册*/requireComponent.keys ()。forEach(文件名=比;{/*获取组件配置*/const componentConfig=requireComponent(文件名)/*从文件名中得到组件名*/const componentName=upperFirst ( 　　camelCase ( 　　文件名/*移除开头的。”/_“*/.replace (/^ \。\/_/?/*去掉文件的后缀名,也即.vue */.replace (/\。\ w +/美元,”) 　　） 　　）/*全局注册组件*/Vue.component (componentName componentConfig.default | | componentConfig) 　　})

vue3.0 CLI - 2.6组件的复用入门教程