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

2023-09-08 04:44:05 63

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

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

定义一个基础组件

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

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

在component目录下新建Base目录，Base下新建文件TopNav.vue。加入如下代码：

在About.vue中加入以下红色部分的代码：

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

所谓的复用是啥意思呢？如下：

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

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

好的，在变【全局】之前，有个问题：全局和局部有什么区别？

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

把组件变为全局组件

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

所以全局注册组件也并不神秘，在main.js加入如下代码：

importTopNavfrom'@components/Base/TopNav'
Vue.component('TopNav',TopNav)

注意：Vue.component('TopNav',TopNav)必须在 newVue({router,store,render:h=>h(App)}).$mount('#app')也就是根组件实例化之前定义。

然后去掉About.vue中TopNav.vue的引入：

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

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

首先引入两个lodash模块：

importupperFirstfrom'lodash/upperFirst'
importcamelCasefrom'lodash/camelCase'

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

constrequireComponent=require.context(
/*在./components/Base文件夹中寻找基础模块*/
'./components/Base',
/*是否包含子文件夹*/
true,
/*只要是.vue结尾的文件都是基础模块*/
/[\w-]+\.vue$/
)

下一步便是遍历进行模块import：

/*对这个文件集合进行遍历-import-全局注册*/
requireComponent.keys().forEach(fileName=>{
/*获取组件配置*/
constcomponentConfig=requireComponent(fileName)
/*从文件名中得到组件名*/
constcomponentName=upperFirst(
camelCase(
fileName
/*移除开头的"./_"*/
.replace(/^\.\/_/,'')
/*去掉文件的后缀名，也即.vue*/
.replace(/\.\w+$/,'')
)
)
/*全局注册组件*/
Vue.component(componentName,componentConfig.default||componentConfig)
})

这样'./components/Base'目录下的*.vue组件会自动被引入并注册为全局组件。

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

组件的复用便介绍到这里，相关代码也已经上传至GitHub.

总结

以上所述是小编给大家介绍的vue3.0CLI-2.6-组件的复用入门教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

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

热门推荐

随机推荐