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创建一个选择文件的对话框代码
Jun 16 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 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_Flame(Version:Progress)的原代码
2006/10/09 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
基于scrapy的redis安装和配置方法
2018/06/13 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
Python tkinter常用操作代码实例
2020/01/03 Python
Python数组并集交集补集代码实例
2020/02/18 Python
基于python代码批量处理图片resize
2020/06/04 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
请介绍一下WSDL的文档结构
2013/03/17 面试题
员工自我鉴定范文
2013/10/06 职场文书
社区庆中秋节活动方案
2014/02/07 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
学生会部长竞聘书
2014/03/31 职场文书
委托书的写法
2014/08/30 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers