vue3如何將通用組件注冊(cè)成全局組件
一、問題重現(xiàn)
我們用過vue的人都知道會(huì)有一個(gè)components文件夾用來存放我們的通用組件：
這里我的通用組件就有四個(gè)，但是有一些是使用評(píng)率比較高的，如果很多地方要使用我還得導(dǎo)入相同的組件，寫的都是一樣的代碼
import Imageview from './ImageView/index.vue' import Xtsku from './Xtsku/index.vue'
那我為什么不化簡(jiǎn)一下，或者說我就做一些封裝，寫一些邏輯函數(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)文章
Axios 毋庸多說大家在前端開發(fā)中常用的一個(gè)發(fā)送 HTTP 請(qǐng)求的庫(kù)，用過的都知道,篇文章主要給大家介紹了關(guān)于vue中如何簡(jiǎn)單封裝axios的相關(guān)資料,需要的朋友可以參考下2021-06-06
vue3如何解決各場(chǎng)景l(fā)oading過度(避免白屏尷尬!)
在開發(fā)的過程中點(diǎn)擊提交按鈕,或者是一些其它場(chǎng)景總會(huì)遇到loading加載,下面這篇文章主要給大家介紹了關(guān)于vue3如何解決各場(chǎng)景l(fā)oading過度的相關(guān)資料,避免白屏尷尬,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue 使用中的小技巧,是小編日常開發(fā)的時(shí)候用到的小技巧，需要的朋友可以參考下2018-04-04
vue項(xiàng)目中data數(shù)據(jù)之間互相訪問的實(shí)現(xiàn)
本文主要介紹了vue項(xiàng)目中data數(shù)據(jù)之間互相訪問的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要介紹了vue項(xiàng)目中使用postcss-px2rem的方法總結(jié),在項(xiàng)目中為了屏幕適配，經(jīng)常會(huì)用到rem，postcss-px2rem就是為了讓我們直接在將代碼中px自動(dòng)轉(zhuǎn)化成對(duì)應(yīng)的rem的一個(gè)插件，需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
深入理解Vue.js3中Reactive的實(shí)現(xiàn)
reactive是Vue 3的Composition API中的一個(gè)函數(shù),它允許你創(chuàng)建一個(gè)響應(yīng)式的數(shù)據(jù)對(duì)象,本文主要介紹了深入理解Vue.js3中Reactive的實(shí)現(xiàn),感興趣的可以了解一下2024-01-01
vue實(shí)現(xiàn)虛擬列表組件解決長(zhǎng)列表性能問題
這篇文章主要介紹了在vue中實(shí)現(xiàn)虛擬列表組件，解決長(zhǎng)列表性能問題,本文給大家分享實(shí)現(xiàn)思路及實(shí)例代碼，需要的朋友可以參考下2022-07-07
這篇文章主要給大家介紹了關(guān)于vue上傳圖片文件的相關(guān)資料，介紹了利用原始input標(biāo)簽form表單上傳、elementui自帶的el-upload上傳以及elementui實(shí)現(xiàn)一次性上傳多張圖片等方法，需要的朋友可以參考下2021-05-05
vue.js集成echarts時(shí)遇到的一些問題總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于vue.js集成echarts遇到的一些問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04