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 17 Vue.js
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
vue实现滑动解锁功能
Mar 03 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
vue修饰符.capture和.self的区别
Apr 22 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
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
thinkphp实现图片上传功能分享
2014/03/04 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
php自动加载方式集合
2016/04/04 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
详谈nodejs异步编程
2014/12/04 NodeJs
php常见的页面跳转方法汇总
2015/04/15 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
js实现飞机大战小游戏
2020/08/26 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
Python中正则表达式的详细教程
2015/04/30 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
python实现日志按天分割
2019/07/22 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
进程的查看和调度分别使用什么命令
2015/03/25 面试题
《走一步再走一步》教学反思
2014/02/15 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书