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中arguments和arguments.callee的区别浅析
Apr 24 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
Vue Router中应用中间件的方法
Aug 06 Javascript
Js类的构建与继承案例详解
Sep 15 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
数字转英文
2006/12/06 PHP
用PHP读取RSS feed的代码
2008/08/01 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
php如何获取Http请求
2020/04/30 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
Python构建网页爬虫原理分析
2017/12/19 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
python实现扫描日志关键字的示例
2018/04/28 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
python操作yaml说明
2020/04/08 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
手术室护士自我鉴定
2013/10/14 职场文书
安全生产演讲稿
2014/05/09 职场文书
2014年商场工作总结
2014/11/22 职场文书
如何写观后感
2015/06/19 职场文书
劳动模范获奖感言
2015/07/31 职场文书
大学生十八大感想
2015/08/11 职场文书