快捷導(dǎo)航

Vue實(shí)現(xiàn)批量注冊全局組件的示例代碼

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

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

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

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

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

鋪墊：在講解如何批量注冊全局組件之前，需要先鋪墊兩個(gè) js 的方法

1.Object.keys()

1、語法

Object.keys(obj)

2、參數(shù)

obj 一個(gè)對象

3、返回值

返回一個(gè)由給定對象自身可枚舉的字符串鍵屬性鍵組成的數(shù)組

4、示例

// 簡單數(shù)組
const arr = ["a", "b", "c"];
console.log(Object.keys(arr)); // ['0', '1', '2']
 
// 類數(shù)組對象
const obj = { 0: "a", 1: "b", 2: "c" };
console.log(Object.keys(obj)); // ['0', '1', '2']
 
// 鍵的順序隨機(jī)的類數(shù)組對象
const anObj = { 100: "a", 2: "b", 7: "c" };
console.log(Object.keys(anObj)); // ['2', '7', '100']
 
// getFoo 是一個(gè)不可枚舉的屬性
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、參數(shù)

obj 一個(gè)對象

3、返回值

返回一個(gè)由給定對象自有的可枚舉字符串鍵屬性的鍵值對組成的數(shù)組。每個(gè)鍵值對都是一個(gè)包含兩個(gè)元素的數(shù)組：第一個(gè)元素是屬性的鍵（始終是字符串），第二個(gè)元素是屬性值。

4、示例

const obj = { foo: "bar", baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
 
// 類數(shù)組對象
const obj = { 0: "a", 1: "b", 2: "c" };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
 
// 具有隨機(jī)鍵排序的類數(shù)組對象
const anObj = { 100: "a", 2: "b", 7: "c" };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
 
// getFoo 是一個(gè)不可枚舉的屬性
const myObj = Object.create(
  {},
  {
    getFoo: {
      value() {
        return this.foo;
      },
    },
  },
);
myObj.foo = "bar";
console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]

3.如何批量注冊全局組件

前面已經(jīng)講解了具體方法的使用，下面直接上批量注冊全局組件的代碼

// 引入項(xiàng)目中所有想注冊成全局組件的組件
// 引入全局 Svg 圖標(biāo)組件
import SvgIcon from './SvgIcon/index.vue'
// 引入全局 Pagination 分頁器組件
import Pagination from './Pagination/index.vue'
// 引入 element-plus 全部圖標(biāo)組件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 定義一個(gè)全局對象，將所有的組件都放到這個(gè)對象里面
const allGlobalComponent:any = {SvgIcon,Pagination}
// 對外暴露一個(gè)插件對象,動態(tài)注冊全局組件
export default{
    // 這里一定要叫作 install 方法
    install(app:any){
        // 通過 Object.keys 遍歷全局對象的每一個(gè) key
        Object.keys(allGlobalComponent).forEach(key => {
            // 將全局對象里面的組件都注冊成全局組件
            app.component(key,allGlobalComponent[key])
        })
        // 將 element-plus 提供的圖標(biāo)注冊為全局組件
        for(const [key,component] of Object.entries(ElementPlusIconsVue)){
            // 將 element-plus 的所有圖標(biāo)組件注冊成全局組件
            app.component(key,component)
        }
    }
}

上面就是我自己使用批量注冊全局組件的方法，當(dāng)然批量注冊全局組件的方法有很多，感興趣的可以再去研究。

到此這篇關(guān)于Vue實(shí)現(xiàn)批量注冊全局組件的示例代碼的文章就介紹到這了,更多相關(guān)Vue注冊全局組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: