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 相关文章推荐
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
js控制的遮罩层实例介绍
May 29 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
用js解决数字不能换行问题
2010/08/10 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
JavaScript基础语法、dom操作树及document对象
2014/12/02 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
python生成ppt的方法
2018/06/07 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
使用npy转image图像并保存的实例
2020/07/01 Python
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
校园报刊亭创业计划书
2014/01/02 职场文书
出纳员岗位职责
2014/03/13 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android
Python中三种花式打印的示例详解
2022/03/19 Python