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 相关文章推荐
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
javascript oop开发滑动(slide)菜单控件
Aug 25 Javascript
分享一个asp.net pager分页控件
Jan 04 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 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/08/16 PHP
微信access_token的获取开发示例
2015/04/16 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
PHP钩子实现方法解析
2019/05/21 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
javascript document.images实例
2008/05/27 Javascript
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
JS 控制小数位数的实现代码
2011/08/02 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
2012/03/21 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
python实现批量下载新浪博客的方法
2015/06/15 Python
python在非root权限下的安装方法
2018/01/23 Python
python实现音乐下载器
2018/04/15 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
pandas的排序和排名的具体使用
2019/07/31 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
《学会合作》教学反思
2014/04/12 职场文书
工作目标责任书
2014/07/23 职场文书
大学生学年个人总结
2015/02/15 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL