Vue 批量注册全局组件

为什么要批量注册全局组件？

在项目开发中，我们经常会封装一些全局组件，然后在入口文件中统一导入，这时就会出现一个问题，如果我封装了很多组件，假如有成百上千的组件，都想注册成全局组件，那岂不是入口文件要引入几千行，显然这样是很笨拙的，所以就出现了批量注册全局组件。

注：批量注册全局组件的方法有很多，这里我只列举我使用的方法

铺垫：在讲解如何批量注册全局组件之前，需要先铺垫两个 js 的方法

（一）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']

（二）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'] ]

（三）如何批量注册全局组件

前面已经讲解了具体方法的使用，下面直接上批量注册全局组件的代码

// 引入项目中所有想注册成全局组件的组件
// 引入全局 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)
        }
    }
}

上面就是我自己使用批量注册全局组件的方法，当然批量注册全局组件的方法有很多，感兴趣的可以再去研究。

既然看到这了，还请各位看官大人给点个赞！