vue3如何將通用組件注冊(cè)成全局組件
更新時(shí)間：2023年08月28日 11:33:21 作者：編程學(xué)渣ズ
這篇文章主要介紹了vue3將通用組件注冊(cè)成全局組件的方法，本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
一、問題重現(xiàn)
我們用過vue的人都知道會(huì)有一個(gè)components文件夾用來存放我們的通用組件：
這里我的通用組件就有四個(gè)，但是有一些是使用評(píng)率比較高的，如果很多地方要使用我還得導(dǎo)入相同的組件，寫的都是一樣的代碼
import Imageview from './ImageView/index.vue' import Xtsku from './Xtsku/index.vue'
那我為什么不化簡一下，或者說我就做一些封裝，寫一些邏輯函數(shù)，最好的就是將他們都升級(jí)為全局組件，來看看我是怎么做的。
二、使用組件注冊(cè)機(jī)制
不妨礙components文件夾下面創(chuàng)建一個(gè)index文件：
我們將頻繁使用到的組件在這個(gè)文件里全部導(dǎo)入一遍:
import Imageview from './ImageView/index.vue'
import Xtsku from './Xtsku/index.vue'
export const componentplugin = {
install(app){
app.component('Imageview',Imageview)
app.component('Xtsku',Xtsku)
}
}然后通過install這個(gè)函數(shù)將這些組件按照插件的注冊(cè)當(dāng)時(shí)升級(jí)成全局組件就可以了；
在main文件里面：
import {componentplugin} from '@/components'
app.use(componentplugin)這樣就可以全局拿到這幾個(gè)通用組件了。
三、使用方法
無論那個(gè)組件：
<ImageView :image-list="goods.mainPictures"/>
咋們直接用就可以了，直接寫元素都是一樣的效果；
四、提重點(diǎn)
最主要的就是要知道如何寫這個(gè)install函數(shù)，其實(shí)這個(gè)直接寫在main文件里面也是一樣的，只不過這里將它模塊化分開了，更便于后期維護(hù)和管理；
到此這篇關(guān)于vue3如何將通用組件注冊(cè)成全局組件的文章就介紹到這了,更多相關(guān)vue3注冊(cè)全局組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
html5-qrcode是一個(gè)基于JavaScript?輕量級(jí)和跨平臺(tái)的掃碼插件,允許用戶使用攝像頭掃描二維碼,并且解析為文本或者url,本文給大家介紹了vue實(shí)現(xiàn)h5掃碼,需要的朋友可以參考下2024-01-01
vue 動(dòng)態(tài)表單開發(fā)方法案例詳解
這篇文章主要介紹了vue 動(dòng)態(tài)表單開發(fā)方法,結(jié)合具體案例形式詳細(xì)分析了vue.js動(dòng)態(tài)表單相關(guān)原理、開發(fā)步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-12-12
一次用vue3簡單封裝table組件的實(shí)戰(zhàn)過程
之所以封裝全局組件是為了省事,所有的目的,全都是為了偷懶,下面這篇文章主要給大家介紹了關(guān)于用vue3簡單封裝table組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了詳解Axios統(tǒng)一錯(cuò)誤處理與后置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
Vue頁面返回滾動(dòng)位置恢復(fù)(keep-alive滾動(dòng)記憶)
Vue中通過自定義組合式函數(shù)useScroll,結(jié)合ref響應(yīng)式狀態(tài)、生命周期鉤子及DOM引用,實(shí)現(xiàn)keep-alive緩存組件的滾動(dòng)位置保存與恢復(fù),優(yōu)化用戶返回時(shí)的瀏覽體驗(yàn),感興趣的可以了解一下2025-09-09
這篇文章主要為大家介紹了el?autocomplete支持分頁上拉加載使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Vue3項(xiàng)目上線配置Nginx反向代理,用于解決跨域、負(fù)載均衡及靜態(tài)資源處理,步驟包括安裝Nginx、打包前端代碼、修改配置文件、啟用并重啟服務(wù),實(shí)現(xiàn)請(qǐng)求轉(zhuǎn)發(fā)與優(yōu)化訪問體驗(yàn)2025-07-07
Vue.js中的refs屬性是一個(gè)非常有用的特性,它允許我們?cè)诮M件中操作 DOM 元素和組件實(shí)例,本文來介紹一下Vue寶典之this.$refs屬性的使用,感興趣的可以了解一下2023-12-12
這篇文章主要給大家介紹了關(guān)于vue中Axios的封裝與API接口的管理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
在使用Vue2開發(fā)移動(dòng)端頁面的時(shí)候,需要做一個(gè)效果,實(shí)現(xiàn)的方案是背景漸變,但是想要實(shí)現(xiàn)這個(gè)效果就必須進(jìn)行定位,我的背景高度需要在一個(gè)十分恰當(dāng)?shù)奈恢?但是我的圖片會(huì)隨著移動(dòng)端頁面的變化而發(fā)生高度的變化,為什么會(huì)變化？所以本文介紹了Vue中獲取圖片高度的方法2024-08-08