加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-16 23:35:00 所属栏目:百科 来源:网络整理
导读:我的 github 地址 - - 阶段学习成果都会建立分支。 ========================== 定义一个基础组件 这个基础组件,是导航条中 可以复用 的基础组件 单个导航。 基础组件【导航组件】基础的功能是能够显示文字,单击的交互方式。明确任务目标之后,进行开发。

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

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

定义一个基础组件

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

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

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

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

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

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

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

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

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

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

把组件变为全局组件

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

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

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

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

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

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

首先引入两个 lodash 模块:

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

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

{ /* 获取组件配置 */ const componentConfig = requireComponent(fileName) /* 从文件名中得到组件名 */ const componentName = upperFirst( camelCase( fileName /* 移除开头的 "./_" */ .replace(/^./_/,'') /* 去掉文件的后缀名,也即 .vue */ .replace(/.w+$/,'') ) ) /* 全局注册组件 */ Vue.component(componentName,componentConfig.default || componentConfig) })

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

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

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

总结

以上所述是小编给大家介绍的vue3.0 CLI - 2.6 - 组件的复用入门教程。编程之家 52php.cn 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读