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进行拖拽
Jul 20 Javascript
jquery构造器的实现代码小结
May 16 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
js实现延迟加载的方法
Jun 24 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
详解angular用$sce服务来过滤HTML标签
Apr 11 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 Javascript
layui table单元格事件修改值的方法
Sep 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对数组排序代码分享
2014/02/24 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
js实现点赞效果
2020/03/16 Javascript
python实现解数独程序代码
2017/04/12 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
目前最全的python的就业方向
2018/06/05 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
大学生最新职业生涯规划书范文
2014/01/12 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
一岗双责责任书
2014/04/15 职场文书
单位承诺书格式
2014/05/21 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS
redis缓存存储Session原理机制
2021/11/20 Redis
Vue的过滤器你真了解吗
2022/02/24 Vue.js
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL