vue3如何將通用組件注冊成全局組件
更新時間：2023年08月28日 11:33:21 作者：編程學(xué)渣ズ
這篇文章主要介紹了vue3將通用組件注冊成全局組件的方法，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
一、問題重現(xiàn)
我們用過vue的人都知道會有一個components文件夾用來存放我們的通用組件：
這里我的通用組件就有四個，但是有一些是使用評率比較高的，如果很多地方要使用我還得導(dǎo)入相同的組件，寫的都是一樣的代碼
import Imageview from './ImageView/index.vue' import Xtsku from './Xtsku/index.vue'
那我為什么不化簡一下，或者說我就做一些封裝，寫一些邏輯函數(shù)，最好的就是將他們都升級為全局組件，來看看我是怎么做的。
二、使用組件注冊機制
不妨礙components文件夾下面創(chuàng)建一個index文件：
我們將頻繁使用到的組件在這個文件里全部導(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這個函數(shù)將這些組件按照插件的注冊當(dāng)時升級成全局組件就可以了；
在main文件里面：
import {componentplugin} from '@/components'
app.use(componentplugin)這樣就可以全局拿到這幾個通用組件了。
三、使用方法
無論那個組件：
<ImageView :image-list="goods.mainPictures"/>
咋們直接用就可以了，直接寫元素都是一樣的效果；
四、提重點
最主要的就是要知道如何寫這個install函數(shù)，其實這個直接寫在main文件里面也是一樣的，只不過這里將它模塊化分開了，更便于后期維護和管理；
到此這篇關(guān)于vue3如何將通用組件注冊成全局組件的文章就介紹到這了,更多相關(guān)vue3注冊全局組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Axios 毋庸多說大家在前端開發(fā)中常用的一個發(fā)送 HTTP 請求的庫，用過的都知道,篇文章主要給大家介紹了關(guān)于vue中如何簡單封裝axios的相關(guān)資料,需要的朋友可以參考下2021-06-06
vue3如何解決各場景l(fā)oading過度(避免白屏尷尬!)
在開發(fā)的過程中點擊提交按鈕,或者是一些其它場景總會遇到loading加載,下面這篇文章主要給大家介紹了關(guān)于vue3如何解決各場景l(fā)oading過度的相關(guān)資料,避免白屏尷尬,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue 使用中的小技巧,是小編日常開發(fā)的時候用到的小技巧，需要的朋友可以參考下2018-04-04
vue項目中data數(shù)據(jù)之間互相訪問的實現(xiàn)
本文主要介紹了vue項目中data數(shù)據(jù)之間互相訪問的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要介紹了vue項目中使用postcss-px2rem的方法總結(jié),在項目中為了屏幕適配，經(jīng)常會用到rem，postcss-px2rem就是為了讓我們直接在將代碼中px自動轉(zhuǎn)化成對應(yīng)的rem的一個插件，需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
reactive是Vue 3的Composition API中的一個函數(shù),它允許你創(chuàng)建一個響應(yīng)式的數(shù)據(jù)對象,本文主要介紹了深入理解Vue.js3中Reactive的實現(xiàn),感興趣的可以了解一下2024-01-01
這篇文章主要介紹了在vue中實現(xiàn)虛擬列表組件，解決長列表性能問題,本文給大家分享實現(xiàn)思路及實例代碼，需要的朋友可以參考下2022-07-07
這篇文章主要給大家介紹了關(guān)于vue上傳圖片文件的相關(guān)資料，介紹了利用原始input標(biāo)簽form表單上傳、elementui自帶的el-upload上傳以及elementui實現(xiàn)一次性上傳多張圖片等方法，需要的朋友可以參考下2021-05-05
vue.js集成echarts時遇到的一些問題總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于vue.js集成echarts遇到的一些問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04