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 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
原生JavaScript实现进度条
Feb 19 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的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
javascript的事件描述
2006/09/08 Javascript
JS option location 页面跳转实现代码
2008/12/27 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
python中的代码编码格式转换问题
2015/06/10 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
如何用Python 加密文件
2020/09/10 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
如何做好总经理助理
2013/11/12 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python
浅析Django接口版本控制
2021/06/26 Python
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS
Python利用zhdate模块实现农历日期处理
2022/03/31 Python