快捷導(dǎo)航

Vue3注冊全局組件的使用方法

更新時(shí)間：2024年01月11日 17:30:02 作者：tingkeiii

例如組件使用頻率非常高,幾乎每個(gè)頁面都在使用便可以封裝成全局組件,下面通過本文給大家介紹Vue3注冊全局組件的相關(guān)知識,感興趣的朋友一起看看吧

1.注冊單個(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)就是注冊全局組件 （‘自定義鍵名'，組件名）

使用方法

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

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

2.批量注冊全局組件

遇到要注冊很多個(gè)全局組件時(shí)，可以定義中間件，讓中間件去完成組件注冊，然后main.js再引入使用這個(gè)中間件

在src/components中新建index.ts用來將所有需要全局注冊的組件導(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 components

2. 在main.ts中導(dǎo)入

?這里使用循環(huán)的方式, 將每個(gè)全局組件進(jìn)行注冊

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' //引入需要注冊的全部組件
const app = createApp(App)
app.use(store, key).use(router).use(ElementPlus)
// 注冊全局的組件 （對所有需要注冊的組件進(jìn)行遍歷并注冊）
for (const componentItme in globalComponent) {
  app.component(componentItme, globalComponent[componentItme])
}
app.mount('#app') //需要注冊完組件后才掛載

3. 如果使用TS編寫,還需要在和main.ts同級的目錄, 創(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
  }
}