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