這篇文章主要介紹了vue3全局組件自動(dòng)注冊(cè)功能如何實(shí)現(xiàn)的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue3全局組件自動(dòng)注冊(cè)功能如何實(shí)現(xiàn)文章都會(huì)有所收獲，下面我們一起來看看吧。
第一步：建文件
需要在src/components 下創(chuàng)建一個(gè)文件夾用于存放封裝的公共組件（這里我起名叫coms）
需要在src/components 下創(chuàng)建一個(gè)js文件用于存放引入組件并注冊(cè)（這里我起名叫Index.js）
第二步：寫函數(shù)
在coms中建文件夾，將組件放入這個(gè)文件夾，此文件夾的名字就是我們將要注冊(cè)組件的名字。
在Index.js中寫入以下工具函數(shù)：
// 全局組件注冊(cè) 需要到coms這個(gè)目錄下注冊(cè)
export default {
install(app) {
const req = require.context('./coms', true, /\.vue$/);
req.keys().forEach((item) => {
const defaultObj = req(item).default;
let name = item.split('/')[1];
// console.log('name', name);
app.component(name, defaultObj);
});
}
};注意：這里我沒有用 defaultObj.__file 來取文件路徑，是因?yàn)樯a(chǎn)環(huán)境下__file屬性會(huì)被刪除，會(huì)導(dǎo)致如下報(bào)錯(cuò)
第三步：導(dǎo)入文件
在main.js中導(dǎo)入工具函數(shù)并掛載到app中
import coms from '@/components/Index'; //全局組件注冊(cè) app.use(coms);
第四步：全局使用
到這一步就可以全局用我們定義好的文件名作為組件名了。
ps：vue2其實(shí)也大差不差，就是吧app.use()改成了 Vue.use()
補(bǔ)充： Vue3注冊(cè)全局組件
例如組件使用頻率非常高，幾乎每個(gè)頁(yè)面都在使用便可以封裝成全局組件
1、注冊(cè)單個(gè)全局組件
在main.ts 引入我們的組件跟隨在createApp(App) 后面 切記不能放到mount 后面這是一個(gè)鏈?zhǔn)秸{(diào)用用
其次調(diào)用 component 第一個(gè)參數(shù)組件名稱 第二個(gè)參數(shù)組件實(shí)例
import { createApp } from 'vue'
import App from './App.vue'
import './assets/css/reset/index.less'
import Card from './components/Card/index.vue'
createApp(App).component('Card',Card).mount('#app')
//.component('Card',Card)就是注冊(cè)全局組件 （‘自定義鍵名'，組件名）使用方法
直接在其他vue頁(yè)面 立即使用即可 無需引入
<template> <Card></Card> </template>
2、批量注冊(cè)全局組件
遇到要注冊(cè)很多個(gè)全局組件時(shí)，可以定義中間件，讓中間件去完成組件注冊(cè)，然后main.js再引入使用這個(gè)中間件
在src/components中新建index.ts用來將所有需要全局注冊(cè)的組件導(dǎo)入
?: 如果使用的是 JS 可以刪除類型校驗(yàn)
import type { Component } from 'vue' //import type 是用來協(xié)助進(jìn)行類型檢查和聲明的，在運(yùn)行時(shí)是完全不存在的。
import SvgIcon from './SvgIcon/index.vue'
// ?如果使用的是 JS 可以刪除類型校驗(yàn)
const components: {
[propName: string]: Component //字面量類型，每個(gè)屬性值類型為組件的類型
} = {
SvgIcon
}
export default components2、在main.ts中導(dǎo)入
?這里使用循環(huán)的方式, 將每個(gè)全局組件進(jìn)行注冊(cè)
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' // 基于斷點(diǎn)的隱藏類 Element 額外提供了一系列類名，用于在某些條件下隱藏元素
import App from './App.vue'
import router from './router'
import { store, key } from './store'
import globalComponent from '@/components/index' //引入需要注冊(cè)的全部組件
const app = createApp(App)
app.use(store, key).use(router).use(ElementPlus)
// 注冊(cè)全局的組件 （對(duì)所有需要注冊(cè)的組件進(jìn)行遍歷并注冊(cè)）
for (const componentItme in globalComponent) {
app.component(componentItme, globalComponent[componentItme])
}
app.mount('#app') //需要注冊(cè)完組件后才掛載3、如果使用TS編寫,還需要在和main.ts同級(jí)的目錄, 創(chuàng)建一個(gè)components.d.ts, 用來處理組件引入報(bào)錯(cuò)的問題和添加組件類型提示
import SvgIcon from '@/components/SvgIcon/index.vue'
//要擴(kuò)充@vue/runtime-core包的聲明
declare module '@vue/runtime-core' {
export interface GlobalComponents { //這里擴(kuò)充"ComponentCustomProperties"接口
SvgIcon: typeof SvgIcon
}
}4、最后直接導(dǎo)入即可
