本篇文章一起来看看Vue中如何封装一个自动化注册全局组件，希望对大家有所帮助！
在项目的开发过程中，我们常常会去封装一些比较常用的全局组件, 但是每添加一个组件就需要手动在main.js引入注册，不仅麻烦还代码量多，着实让人心烦。 所以干脆封装一个自动化注册全局组件。
1、自定义全局组件文件夹
在src下新建一个globalComponents，用于存放全局组件，并新建一个组件，例如Orange；
2、组件自动注册配置文件
在globalComponents中创建一个index.js，用来查找全部组件并自动注册
//自动注册全局组件，每次新增组件必须重新编译importVuefrom'vue'constrequireComponent=require.context('../globalComponents',//其组件目录的相对路径true,//是否查询其子目录/\.vue$///匹配基础组件文件名的正则表达式)requireComponent.keys().forEach(fileName=>{constcomponentConfig=requireComponent(fileName);//获取组件配置/***兼容importexport和requiremodule.export两种规范*///如果这个组件选项是通过exportdefault导出的,就会优先使用.defaultconstcomp=componentConfig.default||componentConfig;Vue.component(comp.name,comp)//此处的name是组件属性定义的name})
3、编辑Orange/index.vue
组件最重要的是组件属性定义的name（name为自动注册的组件名）
<template><divclass="wrapper">Orange</div></template><script>exportdefault{name:'Orange',//此处的name属性值将为后面使用的组件名<orange/>，需唯一components:{},props:{},data(){return{}},created(){},mounted(){},methods:{}}</script>
4、入口文件main.js中导入globalComponents/index.js
//main.jsimportVuefrom'vue'//自动注册全局组件import'./globalComponents/index.js'
基本完成以上几步就大功告成了，后面就是可以直接使用这个全局组件了~
使用方法：
<template><divclass="wrapper"><!–自动注册的全局组件–><orange/></div></template>
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/41770.html；
