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+Element实现增删改查的示例源码
Nov 23 Vue.js
Vue组件生命周期运行原理解析
Nov 25 Vue.js
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
vue组件是如何解析及渲染的?
Jan 13 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
vue项目支付功能代码详解
Feb 18 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
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
php判断访问IP的方法
2015/06/19 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
Python中的super用法详解
2015/05/28 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
公司前台接待岗位职责
2013/12/03 职场文书
保护环境建议书400字
2014/05/13 职场文书
任命书怎么写
2014/06/04 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android