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


Posted in Javascript onSeptember 14, 2018

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

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

定义一个基础组件

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

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

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

<template>
 <div class="topnav">
  {{title}}
 </div>
</template>
<script>
export default {
 name: 'topnav',
 props: ['title'],
 data: function () { return {
  text: '导航条'
 } }
}
</script>

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

<template>
 <div class="about">
 <top-nav title="推荐"/>
 <HelloWorld msg="vue 官方相关资料的链接"/>
 </div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import TopNav from '@/components/Base/TopNav.vue'
export default {
 name: 'home',
 components: {
 HelloWorld, TopNav
 }
}
</script>

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

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

<top-nav title="推荐"/>
<top-nav title="军事"/>
<top-nav title="社会"/>
<top-nav title="科技"/>

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

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

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

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

把组件变为全局组件

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

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

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

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

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

<template><div class="about">
 <top-nav title="推荐"/>
 <top-nav title="军事"/>
 <top-nav title="社会"/>
 <top-nav title="科技"/>
 <HelloWorld msg="vue 官方相关资料的链接"/>
</div></template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
// import TopNav from '@/components/Base/TopNav.vue'
export default {
 name: 'home',
 components: {
 HelloWorld
 }
}
</script>

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

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

首先引入两个 lodash 模块:

import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

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

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

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

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

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

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

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

总结

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

Javascript 相关文章推荐
javascript multibox 全选
Mar 22 Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
vue地区选择组件教程详解
May 04 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 Javascript
基于JavaScript实现控制下拉列表
May 08 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
JS前端监控采集用户行为的N种姿势
Jul 23 Javascript
在vue项目中使用md5加密的方法
Sep 14 #Javascript
在vue项目中引用Iview的方法
Sep 14 #Javascript
详解webpack-dev-server使用方法
Sep 14 #Javascript
JS 实现微信扫一扫功能
Sep 14 #Javascript
详解webpack2异步加载套路
Sep 14 #Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 #Javascript
react项目实践之webpack-dev-serve
Sep 14 #Javascript
You might like
php中的时间显示
2007/01/18 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
input的focus方法使用
2010/03/13 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
Python读写ini文件的方法
2015/05/28 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
2014年乡镇植树节活动方案
2014/02/28 职场文书
爱心捐书倡议书
2015/04/27 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
工厂无线对讲系统解决方案
2022/02/18 无线电
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers