vue3全域元件自動註冊功能如何實現

vue3全域元件自動註冊

第一步：建立檔案

需要在src/components 下建立一個資料夾來存放封裝的公共元件（這裡我取名叫coms）

需要在src/components 下建立一個js檔案用於存放引入元件並註冊（這裡我取名叫Index.js）

##第二步：寫函數

在coms中建立資料夾，將元件放入這個資料夾，此資料夾的名字就是我們將要註冊元件的名字。

在Index.js中寫入以下工具函數：

// 全局组件注册 需要到coms这个目录下注册
 
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 來取檔案路徑，是因為生產環境下__file屬性會被刪除，會導致如下報錯

第三步：導入檔案

在main.js中匯入工具函數並掛載到app中

import coms from '@/components/Index'; //全局组件注册
app.use(coms);

第四步：全域使用

到這一步就可以全域用我們定義好的檔名當元件名了。

ps：vue2其實也大差不差，就是吧app.use()改成了Vue.use()

補充： Vue3註冊全局元件

例如元件使用頻率非常高，幾乎每個頁面都在使用便可以封裝成全域元件

1.註冊單一全域元件

在main.ts 引入我們的元件跟隨在createApp(App) 後面切記不能放到mount 後面這是一個鍊式呼叫用

其次呼叫component 第一個參數元件名稱第二個參數元件實例

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)就是注册全局组件 （‘自定义键名'，组件名）

使用方法

直接在其他vue頁面立即使用即可無需引入

<template>
 <Card></Card>
</template>

2.批量註冊全域組件

#遇到要註冊很多個全域元件時，可以定義中間件，讓中間件去完成元件註冊，然後main.js再引入使用這個中間件

在

src/components中新建index.ts用來將所有需要全域註冊的元件匯入

✨: 如果使用的是 

JS 可以刪除型別校驗

import type { Component } from 'vue' //import type 是用来协助进行类型检查和声明的，在运行时是完全不存在的。

import SvgIcon from './SvgIcon/index.vue'

// ✨如果使用的是 JS 可以删除类型校验

const components: {

  [propName: string]: Component //字面量类型，每个属性值类型为组件的类型

} = {

  SvgIcon

}

export default components

2 . 在

main.ts中導入

✨這裡使用循環的方式, 將每個全域元件進行註冊

import { createApp } from 'vue'

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css' // 基于断点的隐藏类 Element 额外提供了一系列类名，用于在某些条件下隐藏元素

import App from './App.vue'

import router from './router'

import { store, key } from './store'

import globalComponent from '@/components/index' //引入需要注册的全部组件

const app = createApp(App)

app.use(store, key).use(router).use(ElementPlus)

// 注册全局的组件 （对所有需要注册的组件进行遍历并注册）

for (const componentItme in globalComponent) {

  app.component(componentItme, globalComponent[componentItme])

}

app.mount('#app') //需要注册完组件后才挂载

3. 如果使用

TS編寫,還需要在和main.ts同級的目錄, 建立一個components.d.ts, 用來處理元件引入報錯的問題和新增元件類型提示

import SvgIcon from '@/components/SvgIcon/index.vue'

//要扩充@vue/runtime-core包的声明

declare module '@vue/runtime-core' {

  export interface GlobalComponents { //这里扩充"ComponentCustomProperties"接口

    SvgIcon: typeof SvgIcon

  }

}

4. 最後直接導入即可

#

以上是vue3全域元件自動註冊功能如何實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！