在Vue2中注冊全局組件的兩種方法詳解
更新時間：2022年07月29日 08:45:10 作者：Code_HHX
這篇文章主要介紹了在Vue2中注冊全局組件的兩種方法,非常的細(xì)致,需要的朋友可以參考下
第一種：在main.js中直接注冊
//引入
import FixedTop from '@/components/FixedTop
//注冊為全局組件
Vue.componet('FixedTop',FixedTop)
//頁面直接使用
<FixedTop />缺點：如果我們需要注冊的全局組件非常多，那么需要一個一個引入，然后分別調(diào)用Vue.componet方法，main.js文件會變得很大很臃腫，不好維護(hù)，所以當(dāng)需要注冊的全局組件非常多的時候可以采用插件的形式注冊
第二種：使用插件的形式注冊在 components 目錄下新建 index.js 文件
在統(tǒng)一注冊的入口文件中
//引入
import FixedTop from '@/components/FixedTop'
import FixedBottom from '@/components/FixedBottom'
export default {
? install(Vue){
? ? //注冊全局組件
? ? Vue.componet('FixedTop',FixedTop)
? ? Vue.componet('FixedBottom ',FixedBottom )
}
在 main.js 文件注冊插件入口
import Components form '@/components'
Vue.use(Components)
擴(kuò)展：當(dāng)項目組件較多時，區(qū)分開業(yè)務(wù)型組件和非業(yè)務(wù)型組件，便易于維護(hù)
到此這篇關(guān)于在Vue2中注冊全局組件的兩種方法詳解的文章就介紹到這了,更多相關(guān)Vue2注冊全局組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于Vue2.0+ElementUI實現(xiàn)表格翻頁功能
Element UI 是一套采用 Vue 2.0 作為基礎(chǔ)框架實現(xiàn)的組件庫，它面向企業(yè)級的后臺應(yīng)用，能夠幫助你快速地搭建網(wǎng)站，極大地減少研發(fā)的人力與時間成本。這篇文章主要介紹了Vue2.0+ElementUI實現(xiàn)表格翻頁功能,需要的朋友可以參考下2017-10-10
在vue項目中,很多場景要求我們動態(tài)改變元素的樣式,下面這篇文章主要給大家介紹了關(guān)于Vue動態(tài)樣式方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)圖片滑動驗證功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
Vue3中如何使用Three.js詳解(包括各種樣例、常見場景、問題及解決方案)
Three.js是一個常見的需求,Three.js是一個用于在瀏覽器中創(chuàng)建和顯示動畫3D計算機(jī)圖形的JavaScript庫,這篇文章主要介紹了Vue3中如何使用Three.js的相關(guān)資料,包括各種樣例、常見場景、問題及解決方案,需要的朋友可以參考下2025-04-04
Vuejs 2.0 子組件訪問/調(diào)用父組件的方法(示例代碼)
這篇文章主要介紹了Vuejs 2.0 子組件訪問/調(diào)用父組件的方法(示例代碼),需要的朋友可以參考下2018-02-02
Vue過濾器filters的用法及時間戳轉(zhuǎn)換問題
Vue的filters過濾器是比較常見的一個知識點，下面我將結(jié)合時間戳轉(zhuǎn)換的例子帶你快速了解filters的用法，感興趣的朋友一起看看吧2021-09-09
這篇文章主要介紹了微信小程序用戶盒子、宮格列表,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這里提供一個Vue單點登錄的demo給大家參考，對Vue實現(xiàn)單點登錄控件的完整代碼感興趣的朋友跟隨小編一起看看吧2021-11-11
在vue使用clipboard.js進(jìn)行一鍵復(fù)制文本的實現(xiàn)示例
這篇文章主要介紹了在vue使用clipboard.js進(jìn)行一鍵復(fù)制文本的實現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
vue+vue-fullpage實現(xiàn)整屏滾動頁面的示例代碼(直播平臺源碼)
這篇文章主要介紹了vue+vue-fullpage實現(xiàn)整屏滾動頁面,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06