Vue 批量注册全局组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了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)
        }
    }
}

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

既然看到这了，还请各位看官大人给点个赞！文章来源地址https://www.toymoban.com/news/detail-815046.html

到了这里，关于Vue 批量注册全局组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！