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对JSON数据排序的3个例子
Apr 12 Javascript
jQuery中remove()方法用法实例
Dec 25 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
javascript中关于&& 和 || 表达式的小技巧分享
Apr 10 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
Sort()函数的多种用法
Mar 20 Javascript
用jQuery获取table中行id和td值的实现代码
May 19 Javascript
js+css3制作时钟特效
Oct 16 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
js实现缓动动画
Nov 25 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绘制在图片上的正余弦曲线
2013/06/08 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
Python回调函数用法实例详解
2015/07/02 Python
利用python代码写的12306订票代码
2015/12/20 Python
Python爬取京东的商品分类与链接
2016/08/26 Python
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
python中字典增加和删除使用方法
2020/09/30 Python
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
会计系中文个人求职信
2013/12/24 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS