Vue3中注冊全局的組件,并在TS中添加全局組件提示方式
Vue3中注冊全局的組件
1. 在src/components中新建index.ts用來將所有需要全局注冊的組件導(dǎo)入
?: 如果使用的是 JS 可以刪除類型校驗(yàn)
import type { Component } from 'vue'
import SvgIcon from './SvgIcon/index.vue'
// ?如果使用的是 JS 可以刪除類型校驗(yàn)
const components: {
[propName: string]: Component
} = {
SvgIcon
}
export default components2. 在main.ts中導(dǎo)入
?這里使用循環(huán)的方式, 將每個全局組件進(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).mount('#app')
// 注冊全局的組件
for (const componentItme in globalComponent) {
app.component(componentItme, globalComponent[componentItme])
}3. 如果使用TS編寫,還需要在和main.ts同級的目錄, 創(chuàng)建一個components.d.ts, 用來處理組件引入報錯的問題和添加組件提示
import SvgIcon from '@/components/SvgIcon/index.vue'
declare module '@vue/runtime-core' {
export interface GlobalComponents {
SvgIcon: typeof SvgIcon
}
}4. 最后直接導(dǎo)入即可
Vue3踩坑--全局注冊組件
我的框架:vue3+vite+ts+naiveUI
步驟一：
創(chuàng)建一個loading文件夾
index.vue
index.ts
//loading/index.vue
<script lang="ts">
import { NSpace, NSpin } from 'naive-ui'
import { defineComponent } from 'vue'
export default defineComponent({
? name: 'HsNavLoading',
? components: {
? ? NSpace,
? ? NSpin
? }
})//loading/index.ts
import { App } from 'vue'
import loading from './index.vue'
export default {
? install(app: App) {
? ? app.component(loading.name, loading)
? }
}步驟二：
components文件夾下創(chuàng)建index.ts一次引入多個全局組件并導(dǎo)出
//components/index.ts
import { App } from 'vue'
import loading from '@/components/Loading/index'
const components = [loading]
export default {
? install(app: App) {
? ? components.map((item) => {
? ? ? app.use(item)
? ? })
? }
}步驟三：
main.js引入
//main.js
import { createApp } from 'vue'
import App from './App.vue'
import components from '@/components/index'
const app = createApp(App)
app.use(router).mount('#app')
app.use(components)步驟四：
在單頁面中使用
<hsNavLoading :show="isLoading" />
遇到的坑：
一開始loading/index.vue使用setup語法糖，通過 defineExpose 來導(dǎo)出name
報錯
Failed to resolve component: hsNavLoading If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
<script lang="ts" setup>
import { NSpace, NSpin } from 'naive-ui'
defineExpose({
? ?name: 'HsNavLoading'
})
</script>解決辦法：如步驟一，把語法糖換掉
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了淺談Vue.js 組件中的v-on綁定自定義事件理解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
一文帶你了解threejs在vue項(xiàng)目中的基本使用
three.js是一個用于在Web上創(chuàng)建三維圖形的JavaScript庫,它可以用于創(chuàng)建各種類型的三維場景,包括游戲、虛擬現(xiàn)實(shí)、建筑和產(chǎn)品可視化等,下面這篇文章主要給大家介紹了關(guān)于如何通過一文帶你了解threejs在vue項(xiàng)目中的基本使用,需要的朋友可以參考下2023-04-04
vue+elementUI顯示表格指定列合計(jì)數(shù)據(jù)方式
這篇文章主要介紹了vue+elementUI顯示表格指定列合計(jì)數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue中的vue-router?query方式和params方式詳解
這篇文章主要介紹了vue中的vue-router?query方式和params方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue實(shí)現(xiàn)將時間戳轉(zhuǎn)換成日期格式
這篇文章主要介紹了vue實(shí)現(xiàn)將時間戳轉(zhuǎn)換成日期格式方式,具有很好的參考價值,希望對大家有所幫助,2023-10-10
這篇文章主要為大家詳細(xì)介紹了Vue計(jì)時器的用法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要給大家介紹了關(guān)于Vue組件化常用方法之組件傳值與通信的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了Vue如何使用CSS自定義變量，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05
解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效
這篇文章主要介紹了解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了Vue插件之滑動驗(yàn)證碼用法,結(jié)合實(shí)例形式詳細(xì)分析了Vue滑動驗(yàn)證碼插件相關(guān)使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-04-04