vue 实现基础组件的自动化全局注册


Posted in Vue.js onDecember 25, 2020

参考官网:https://cn.vuejs.org/v2/guide/components-registration.html

在日常开发中,有一些组件是比较常用,但是为了避免在开发过程中不停地引入,或者在main.js中注册,,或者每添加一个组件就需要手动注册一次。则直接进行自动化全局注册。

自动化全局注册,官网上都详细的说明,以下是自己官网的说明基础上进行了一个demo开发实例:

1、自定义文件夹:

在src下新建一个components文件夹,用于存放组件。并新建一个用于存放需要自动化全局注册的组件,例如base。

vue 实现基础组件的自动化全局注册

2、在base文件夹下定义index.js,具体代码如下示:

// 基础组件的自动化全局注册
import Vue from 'vue'
const requireComponent = require.context(
    // 其组件目录的相对路径
    './',
    // 是否查询其子目录
    true,
    // 匹配基础组件文件名的正则表达式
    /\.vue$/
  )
  requireComponent.keys().forEach(fileName => {
    // 获取组件配置
    const componentConfig = requireComponent(fileName)
    // 全局注册组件
    Vue.component(
        componentConfig.default.name,   // 此处的name,是组件属性定义的name
        // 如果这个组件选项是通过 `export default` 导出的,
        // 那么就会优先使用 `.default`,
        // 否则回退到使用模块的根。
        componentConfig.default
    )
  })

以上代码需要解释的地方:

1、匹配基础组件文件名的正则表达式,此处需要根据实际的组件名称和规则进行配置;

2、componentConfig.default.name此处用到的,是表示组件的名称,并不是固定的写法。可以用不同的写法来表示组件名称,例如可以直接解析fileName得出文件夹的名称作为组件名称也是可以的。componentConfig.default.name中的name,来自于组件定义的时候页面的name。若页面没有定义name,则报错。

vue 实现基础组件的自动化全局注册

3、在main.js中引入index.js文件

由于全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。

// 基础组件的自动化全局注册。全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生
import './components/base/index'

vue 实现基础组件的自动化全局注册

4、直接在需要的地方使用该组件即可

vue 实现基础组件的自动化全局注册

页面效果如下示:

vue 实现基础组件的自动化全局注册

以上就是vue 实现基础组件的自动化全局注册的详细内容,更多关于vue 组件全局注册的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
详解vue 组件注册
Nov 20 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue elementUI批量上传文件
Apr 26 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 #Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 #Vue.js
vue3使用vue-count-to组件的实现
Dec 25 #Vue.js
vue+openlayers绘制省市边界线
Dec 24 #Vue.js
vue项目中openlayers绘制行政区划
Dec 24 #Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 #Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 #Vue.js
You might like
example2.php
2006/10/09 PHP
php foreach、while性能比较
2009/10/15 PHP
PHP中的流(streams)浅析
2015/07/02 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
python中的随机函数小结
2018/01/27 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
公司周年庆典策划方案
2014/05/17 职场文书
找工作求职信
2014/07/07 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
《雷雨》教学反思
2016/02/20 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python