Vue实现批量注册全局组件的示例代码
作者：M_emory_
在项目开发中,我们经常会封装一些全局组件,然后在入口文件中统一导入,所以本文主要为大家详细介绍了Vue如何批量注册全局组件,感兴趣的小伙伴可以了解下
为什么要批量注册全局组件
在项目开发中，我们经常会封装一些全局组件，然后在入口文件中统一导入，这时就会出现一个问题，如果我封装了很多组件，假如有成百上千的组件，都想注册成全局组件，那岂不是入口文件要引入几千行，显然这样是很笨拙的，所以就出现了批量注册全局组件。
注：批量注册全局组件的方法有很多，这里我只列举我使用的方法
铺垫：在讲解如何批量注册全局组件之前，需要先铺垫两个 js 的方法
1.Object.keys()
1、语法
Object.keys(obj)
2、参数
obj 一个对象
3、返回值
返回一个由给定对象自身可枚举的字符串键属性键组成的数组
4、示例
// 简单数组
const arr = ["a", "b", "c"];
console.log(Object.keys(arr)); // ['0', '1', '2']
// 类数组对象
const obj = { 0: "a", 1: "b", 2: "c" };
console.log(Object.keys(obj)); // ['0', '1', '2']
// 键的顺序随机的类数组对象
const anObj = { 100: "a", 2: "b", 7: "c" };
console.log(Object.keys(anObj)); // ['2', '7', '100']
// getFoo 是一个不可枚举的属性
const myObj = Object.create(
{},
{
getFoo: {
value() {
return this.foo;
},
},
},
);
myObj.foo = 1;
console.log(Object.keys(myObj)); // ['foo']
2.Object.entries()
1、语法
Object.entries(obj)
2、参数
obj 一个对象
3、返回值
返回一个由给定对象自有的可枚举字符串键属性的键值对组成的数组。每个键值对都是一个包含两个元素的数组：第一个元素是属性的键（始终是字符串），第二个元素是属性值。
4、示例
const obj = { foo: "bar", baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
// 类数组对象
const obj = { 0: "a", 1: "b", 2: "c" };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
// 具有随机键排序的类数组对象
const anObj = { 100: "a", 2: "b", 7: "c" };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
// getFoo 是一个不可枚举的属性
const myObj = Object.create(
{},
{
getFoo: {
value() {
return this.foo;
},
},
},
);
myObj.foo = "bar";
console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]
3.如何批量注册全局组件
前面已经讲解了具体方法的使用，下面直接上批量注册全局组件的代码
// 引入项目中所有想注册成全局组件的组件
// 引入全局 Svg 图标组件
import SvgIcon from './SvgIcon/index.vue'
// 引入全局 Pagination 分页器组件
import Pagination from './Pagination/index.vue'
// 引入 element-plus 全部图标组件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 定义一个全局对象，将所有的组件都放到这个对象里面
const allGlobalComponent:any = {SvgIcon,Pagination}
// 对外暴露一个插件对象,动态注册全局组件
export default{
// 这里一定要叫作 install 方法
install(app:any){
// 通过 Object.keys 遍历全局对象的每一个 key
Object.keys(allGlobalComponent).forEach(key => {
// 将全局对象里面的组件都注册成全局组件
app.component(key,allGlobalComponent[key])
})
// 将 element-plus 提供的图标注册为全局组件
for(const [key,component] of Object.entries(ElementPlusIconsVue)){
// 将 element-plus 的所有图标组件注册成全局组件
app.component(key,component)
}
}
}
上面就是我自己使用批量注册全局组件的方法，当然批量注册全局组件的方法有很多，感兴趣的可以再去研究。
到此这篇关于Vue实现批量注册全局组件的示例代码的文章就介绍到这了,更多相关Vue注册全局组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！