快捷導(dǎo)航

vue3中批量全局注冊(cè)組件實(shí)例詳解

更新時(shí)間：2023年05月31日 10:52:10 作者：m0_62317155

在vue中，我們?cè)趍ain.ts引入的全局注冊(cè)的組件是可以不需要import導(dǎo)入而直接使用的，使用的時(shí)候是自己全局注冊(cè)組件時(shí)的名稱，而不是組件名，這篇文章主要介紹了vue3中批量全局注冊(cè)組件,需要的朋友可以參考下

Vue3中批量全局祖冊(cè)組件

學(xué)習(xí)的時(shí)候順便記錄一下，用于個(gè)人學(xué)習(xí)使用vite+vue3+ts，如果想直接看批量注冊(cè)全局組件的，看文章目錄，直接點(diǎn)目錄跳轉(zhuǎn)即可

在vue中，我們?cè)趍ain.ts引入的全局注冊(cè)的組件是可以不需要import導(dǎo)入而直接使用的。使用的時(shí)候是自己全局注冊(cè)組件時(shí)的名稱，而不是組件名。如下圖所示的Helloword，而不是HelloWorldVue那個(gè)，具體看下圖所示就可以了

除了在main.ts中直接寫引入組件之外，我們還可以通過自己寫一個(gè)ts文件，然后在main.ts引用它，來達(dá)到全局注冊(cè)組件的目的。如下所示

index.js的代碼如下所示

import {App} from 'vue'
import HomeVue from './Home.vue';
export default {
  install(app: App) {
    app.component("Home", HomeVue);
  }
}

main.ts中的代碼如下

import { createApp } from 'vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
// 全局注冊(cè)組件
import HelloWorldVue from './components/HelloWorld.vue'
// 引入ts文件對(duì)應(yīng)的全局注冊(cè)的組件的配置
import components  from './components/index'
const app = createApp(App)
// 全局注冊(cè)組件
app.component("Helloword",HelloWorldVue)
// 對(duì)ts文件中的全局組件進(jìn)行配置
app.use(components)
app.use(ElementPlus).mount('#app')

結(jié)果如下圖所示

批量注冊(cè)全局組件

通過循環(huán)就可以批量注冊(cè)全局組件了，如下圖所示

myComponents.ts的代碼如下

import {App} from 'vue'
import HomeVue from './Home.vue';
import HelloWorldVue from './HelloWorld.vue';
/** 
export default {
  install(app: App) {
    app.component("Home", HomeVue);
    app.component("Helloword", HelloWorldVue)
  }
}
*/
const components = [
  {title: 'Home', componentName: HomeVue},
  {title: 'Helloword', componentName: HelloWorldVue}
]
export default {
  install(app: App) {
    components.forEach(item => {
      // 通過循環(huán)遍歷數(shù)據(jù)批量注冊(cè)組件
      app.component(item.title, item.componentName)
    })
  }
}

main.ts的代碼如下:

import { createApp } from 'vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
// 引入ts文件對(duì)應(yīng)的全局注冊(cè)的組件的配置
import components  from './components/myComponents'
const app = createApp(App)
// 對(duì)ts文件中的全局組件進(jìn)行配置
app.use(components)
app.use(ElementPlus).mount('#app')

App.vue如下

<script setup lang="ts">
</script>
<template>
  <div id="app">
    <Helloword></Helloword>
    <hr>
    <Home></Home>
  </div>
</template>
<style scoped>
</style>

結(jié)果如下圖所示

vite查找.vue 結(jié)尾的文件

但是這里還是需要我們自己手寫一個(gè)一個(gè)引入組件，然后實(shí)現(xiàn)批量導(dǎo)入，那么有沒有一種辦法就是。我讀取某一個(gè)目錄下中以（點(diǎn)）.vue結(jié)尾的文件，然后將其注冊(cè)為全局組件。這樣就可以不用一個(gè)一個(gè)手動(dòng)import導(dǎo)入了。我們可以利用功能 | Vite 官方中文文檔 (vitejs.dev)中提供的import.meta.glob找到以（點(diǎn)）.vue結(jié)尾的文件以及相關(guān)的信息，import.meta.glob的通配符是* 或者是 **，也可以使用！進(jìn)行反選操作。

這里的./表示當(dāng)前使用了import.meta.glob的ts文件所在的目錄，具體看下面的截圖說明即可

import.meta.glob("./path/**/*.vue") 如這里：查找當(dāng)前目錄下的path目錄下和（path目錄下的子目錄中的）以（點(diǎn)）.vue結(jié)尾的文件

import.meta.glob("./path/*.vue")如這里：查找當(dāng)前目錄下的path目錄下的以（點(diǎn)）.vue結(jié)尾的文件，不包括子目錄中的文件

如下圖所示，這里注意看下圖中myComponents.ts文件所在的位置，以及對(duì)應(yīng)的目錄位置，我們要找的是使用了import.meta.glob(“./path/*.vue”)的ts文件對(duì)應(yīng)需要掃描的文件夾的位置。具體看下圖就知道了

console.log的結(jié)果如下所示，可以結(jié)合圖中所示的目錄看一下

如果去掉**號(hào)，那就只是找當(dāng)前目錄下的以.vue結(jié)尾的文件，如下圖所示

console.log()的結(jié)果如下所示，可以結(jié)合圖中所示的目錄看一下

如：我將myComponents.ts換一個(gè)位置，我們只需要找到對(duì)應(yīng)的位置需要掃描的文件路徑即可，如下圖所示

console.log()的結(jié)果如下，可以找到對(duì)應(yīng)的以點(diǎn).vue結(jié)尾的文件

通過 import.meta.glob("./path/**/*.vue") 的形式批量注冊(cè)全局組件

注意：這里我將myComponents.ts重新放到了components目錄下了

console.log()打印的結(jié)果如下

所以上面就相當(dāng)于如果是aaa.vue組件，則就是類似于app.component(“aaa”（這個(gè)全局注冊(cè)的名稱）, aaa（這個(gè)是組件）)即app.component(“aaa”,aaa)。只不過這里是動(dòng)態(tài)引入而已，他們的調(diào)用關(guān)系截圖如下所示，截圖的代碼在后面

myComponents.ts的代碼如下

import {App} from 'vue'
import { defineAsyncComponent,AsyncComponentLoader } from "vue";
const componentss = import.meta.glob("./**/*.vue");
console.log(componentss)
console.log(Object.entries(componentss))
/**
 * 全局組件引用管理
 */
export default {
  install(app: App) {
    for (let [key, value] of Object.entries(componentss)) {
      // 字符串截取，具體看下面console.log()中的name就知道了
      let name = key.slice(key.lastIndexOf("/") + 1, key.lastIndexOf("."));
      console.log(`注意這里的name名稱=》》            ${name}       ===>這個(gè)名稱，
      自己作為了全局祖冊(cè)組件的名稱了,也就是如左側(cè)目錄的：aaa.vue去掉.vue就剩下aaa了
      ，然后那這個(gè)名稱作為組件引用的名稱，具體看截圖就知道了。這時(shí)就是相當(dāng)于跟左側(cè)
      項(xiàng)目目錄的.vue結(jié)尾的文件去掉.vue得到的名稱`)
      app.component(name, defineAsyncComponent(value as AsyncComponentLoader));
    }      
  }
}

main.ts代碼如下

import { createApp } from 'vue'
import './style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
// 引入ts文件對(duì)應(yīng)的全局注冊(cè)的組件的配置
import components  from './components/myComponents'
const app = createApp(App)
// 對(duì)ts文件中的全局組件進(jìn)行配置
app.use(components)
app.use(ElementPlus).mount('#app')

App.vue

<script setup lang="ts">
</script>
<template>
  <div id="app">
    <HelloWorld></HelloWorld>
    <hr>
    <Home></Home>
    <hr>
    <aaa></aaa>
    <hr>
    <bbb></bbb>
  </div>
</template>
<style scoped>
</style>

結(jié)果如下所示