本篇文章一起来看看Vue中如何封装一个自动化注册全局组件，希望对大家有所帮助！
在项目的开发过程中，我们常常会去封装一些比较常用的全局组件, 但是每添加一个组件就需要手动在main.js引入注册，不仅麻烦还代码量多，着实让人心烦。 所以干脆封装一个自动化注册全局组件。【相关推荐：《vue.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为自动注册的组件名）
<template>
<div class="wrapper">
Orange
</div>
</template>
<script>
export default {
name: 'Orange', // 此处的name属性值将为后面使用的组件名 <orange />，需唯一
components: {},
props: {},
data() {
return {}
},
created() {},
mounted() {},
methods: {}
}
</script>4、入口文件main.js中导入globalComponents/index.js
// main.js import Vue from 'vue' // 自动注册全局组件 import './globalComponents/index.js'
<template>
<div class="wrapper">
<!-- 自动注册的全局组件 -->
<orange />
</div>
</template>更多编程相关知识，请访问：编程入门！！
以上是看看Vue中如何封装一个自动化注册全局组件的详细内容。更多信息请关注PHP中文网其他相关文章！
