Vue實現批量注冊全局組件的示例代碼

更新時間：2024年01月22日 10:58:41 作者：M_emory_

在項目開發(fā)中,我們經常會封裝一些全局組件,然后在入口文件中統(tǒng)一導入,所以本文主要為大家詳細介紹了Vue如何批量注冊全局組件,感興趣的小伙伴可以了解下

為什么要批量注冊全局組件

在項目開發(fā)中，我們經常會封裝一些全局組件，然后在入口文件中統(tǒng)一導入，這時就會出現一個問題，如果我封裝了很多組件，假如有成百上千的組件，都想注冊成全局組件，那豈不是入口文件要引入幾千行，顯然這樣是很笨拙的，所以就出現了批量注冊全局組件。

注：批量注冊全局組件的方法有很多，這里我只列舉我使用的方法

鋪墊：在講解如何批量注冊全局組件之前，需要先鋪墊兩個 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}
// 對外暴露一個插件對象,動態(tài)注冊全局組件
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注冊全局組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: