脚本宝典收集整理的这篇文章主要介绍了看看Vue中如何封装一个自动化注册全局组件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

本篇文章一起来看看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中如何封装一个自动化注册全局组件的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的看看Vue中如何封装一个自动化注册全局组件全部内容，希望文章能够帮你解决看看Vue中如何封装一个自动化注册全局组件所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。