这篇文章主要介绍“Vue中怎么封装一个自动化注册全局组件”，在日常操作中，相信很多人在Vue中怎么封装一个自动化注册全局组件问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue中怎么封装一个自动化注册全局组件”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

浦江ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！

在项目的开发过程中，我们常常会去封装一些比较常用的全局组件, 但是每添加一个组件就需要手动在main.js引入注册，不仅麻烦还代码量多，着实让人心烦。 所以干脆封装一个自动化注册全局组件。

1、自定义全局组件文件夹

在src下新建一个globalComponents，用于存放全局组件，并新建一个组件，例如Orange；

2、组件自动注册配置文件

在globalComponents中创建一个index.js，用来查找全部组件并自动注册

// 自动注册全局组件，每次新增组件必须重新编译
import Vue from 'vue'

const requireComponent = require.context(
  '../globalComponents', // 其组件目录的相对路径
  true, // 是否查询其子目录
  /\.vue$/ // 匹配基础组件文件名的正则表达式
)
requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName); // 获取组件配置
  /**
   * 兼容 import export 和 require module.export 两种规范
   */
  // 如果这个组件选项是通过 export default 导出的,就会优先使用 .default
  const comp = componentConfig.default || componentConfig; 
  Vue.component(comp.name, comp) // 此处的name是组件属性定义的name
})

3、编辑Orange/index.vue

组件最重要的是组件属性定义的name（name为自动注册的组件名）

4、入口文件main.js中导入globalComponents/index.js

// main.js

import Vue from 'vue'
// 自动注册全局组件
import './globalComponents/index.js'

• 基本完成以上几步就大功告成了，后面就是可以直接使用这个全局组件了~

• 使用方法：

到此，关于“Vue中怎么封装一个自动化注册全局组件”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

网页标题：Vue中怎么封装一个自动化注册全局组件
当前路径：http://scgulin.cn/article/ipspso.html