Vue一次性简洁明了引入所有公共组件的方法


Posted in Javascript onNovember 28, 2018

使用场景

-在开发过程中,往往会有很多自己定义公用组件,我们通过import 导入,components挂载到实例上就行,项目刚开始还好,但是随着项目迭代,组件越来越多,同一个组件不同的方式用需要重复导入挂载,就显得冗余

这里是通过require.context的一种便捷操作

实例

文件结构

Vue一次性简洁明了引入所有公共组件的方法

component/modal里存放的是我们定义的公共DOM组件

// 导入Vue, 需要使用Vue.component()方法注册组件
import Vue from 'vue'

// let f = r => {
//  return r.keys().map(key => r(key));
// }
//
// console.log(f(require.context('./modal', true, /\.vue/)));

// 将 ./modal 下的所有组件全部读取出来
//
//
// requireComponents: ƒ webpackContext(req) {
//   return __webpack_require__(webpackContextResolve(req));
// }

/**
 * @var requireComponents -- requireComponents保存每个文件的相对路径的集合,可通过keys()返回
 * @function requireComponents -- 也是个方法,传入keys()枚举出来的路径可返回组件实例
 */

const requireComponents = require.context('./', true, /\.vue/);
// 打印结果
// requireComponents: ƒ webpackContext(req) {
//   return __webpack_require__(webpackContextResolve(req));
// }
//

// 遍历出每个组件的路径
requireComponents.keys().forEach(fileName => {
 // 组件实例
 const reqCom = requireComponents(fileName)
 // 截取路径作为组件名
 const reqComName = fileName.split('/')[1]
 // 组件挂载
 Vue.component(reqComName, reqCom.default || reqCom)
})

具体的只要打印出来就一目了然,这里不做赘述

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
vuex的module模块用法示例
Nov 12 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
JS数组方法join()用法实例分析
Jan 18 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 #Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 #Javascript
微信小程序实现评论功能
Nov 28 #Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 #Javascript
小程序点击图片实现自动播放视频
May 29 #Javascript
django使用channels2.x实现实时通讯
Nov 28 #Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 #Javascript
You might like
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
Python Json数据文件操作原理解析
2020/05/09 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
C语言编程练习
2012/04/02 面试题
工作求职自荐信
2014/06/13 职场文书
应聘教师自荐信
2015/03/26 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
初中语文教学反思范文
2016/03/03 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
mysql分表之后如何平滑上线详解
2021/11/01 MySQL