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 相关文章推荐
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
js的回调函数详解
Jan 05 Javascript
JavaScript结合AJAX_stream实现流式显示
Jan 08 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
vue自定义全局共用函数详解
Sep 18 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 Javascript
小程序富文本提取图片可放大缩小
May 26 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代码
2012/07/17 PHP
PHP+apc+ajax实现的ajax_upload上传进度条代码
2016/01/25 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
firefo xml 读写实现js代码
2009/06/11 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
2011/03/28 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
js使用心得分享
2015/01/13 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
原生js封装的ajax方法示例
2018/08/02 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
python算法演练_One Rule 算法(详解)
2017/05/17 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
django 模型中的计算字段实例
2020/05/19 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
道德大讲堂实施方案
2014/05/14 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
js判断两个数组相等的5种方法
2022/05/06 Javascript