vue中注冊組件的兩種方式詳解(全局注冊&& 局部注冊)
vue 是一個完全支持組件化開發(fā)的框架， 組件之間可以進(jìn)行相互的引用。vue 中組件的引用原則：先注冊后使用。
1. 組件的注冊
組件之間可以進(jìn)行相互的引用，例如：
注冊組件的的方式：分為“全局注冊”和“局部注冊”兩種，其中：
被全局注冊的組件，可以在全局任何一個組件內(nèi)使用
被局部注冊的組件，只能在當(dāng)前注冊的范圍內(nèi)使用
1）全局注冊組件
在main .js 中引用
import Vue from 'vue'
//導(dǎo)入 dialogBox 和Test 兩個組件
import dialogBox from './components/InfoMessage/index.vue';
import Test from './components/MyTest.vue'
Vue.component('dialogBox', dialogBox)
Vue.component('my-test', Test)2)使用全局注冊組件
使用app.component() 方法注冊的全局組件，直接以標(biāo)簽的形式進(jìn)行使用即可，例如：
//在 main.js中，注冊了dialogBox 和my-test兩個全局組件
Vue.component('dialogBox', dialogBox)
Vue.component('my-test', Test)
<！--在其他組件中，直接以標(biāo)簽的形式，使用剛才注冊的全局組件即可
<template>
<h1>這是App根組件</h1>
<hr/>
<dialogBox></dialogBox>
<my-test></my-test>
</template>3）局部注冊組件
<template>
<h1>這是App根組件</h1>
<my-swiper></my-swiper>
<my-search></my-search>
</template>
<script>
import Search from './components/MySearch.vue'
export default {
components：{// 通過 components節(jié)點(diǎn)，為當(dāng)前的組件注冊私有子組件
'my-search': Search,
},
}
</script>2.全局注冊和局部注冊的區(qū)別
被全局注冊的組件，可以在全局任何一個組件內(nèi)使用
被局部注冊的組件，只能在當(dāng)前在這里插入代碼片注冊的范圍內(nèi)使用
應(yīng)用場景：
如果某些組件在開發(fā)期間的使用頻率很高，推薦進(jìn)行全局注冊;
如果某些組件只在特定的情況下會被用到，推薦進(jìn)行局部注冊。
3.組件注冊時名稱的大小寫
在進(jìn)行組件的注冊時，定義組件注冊名稱的方式有兩種：
①使用kebab-case命名法(俗稱短橫線命名法，例如my-test 和my-search)
②使用PascalCase命名法(俗稱帕斯卡命名法或大駝峰命名法，例如MyTest和MySearch)
短橫線命名法的特點(diǎn)：
必須嚴(yán)格按照短橫線名稱進(jìn)行使用
帕斯卡命名法的特點(diǎn)：
既可以嚴(yán)格按照帕斯卡名稱進(jìn)行使用，又可以轉(zhuǎn)化為短橫線名稱進(jìn)行使用
注意：在實(shí)際開發(fā)中，推薦使用帕斯卡命名法為組件注冊名稱，因?yàn)樗倪m用性更強(qiáng)
4.通過name 屬性注冊組件
在注冊組件期間，除了可以直接提供組件的注冊名稱之外，還可以把組件的name 屬性作為注冊后組件的名稱，
示例代碼如下：
5.組件之間的樣式?jīng)_突問題
默認(rèn)情況下，寫在.vue 組件中的樣式會全局生效，因此很容易造成多個組件之間的樣式?jīng)_突問題。導(dǎo)致組件之間樣式?jīng)_突的根本原因是：
單頁面應(yīng)用程序中，所有組件的DOM 結(jié)構(gòu)，都是基于唯一的index.html 頁面進(jìn)行呈現(xiàn)的
每個組件中的樣式，都會影響整個index.html 頁面中的DOM 元素
到此這篇關(guān)于vue中注冊組件的兩種方式（全局注冊&& 局部注冊）的文章就介紹到這了,更多相關(guān)vue注冊組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3在新版本中提供了一個新的API，稱為Suspense，它可以使異步組件的加載更加高效和流暢，在本文中，我們將詳細(xì)了解 Vue3 Suspense 處理異步組件加載的工作原理以及如何使用它來提高 Web 應(yīng)用程序的性能2023-06-06
這篇文章主要介紹了關(guān)于.prettierrc代碼格式化配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
在vue中使用echarts實(shí)現(xiàn)飛機(jī)航線水滴圖詞云圖效果
這篇文章主要介紹了在vue中使用echarts實(shí)現(xiàn)飛機(jī)航線?水滴圖?詞云圖,通過引入中國地圖JS文件，會自動注冊地圖，文中結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
這一篇主要是創(chuàng)建一個vue項(xiàng)目并結(jié)合餓了么框架element-ui的文章。文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
本文講解了如何在Linux環(huán)境中部署Vue項(xiàng)目,包括安裝依賴、編譯項(xiàng)目、安裝配置Nginx,并介紹了SSL證書安裝與配置,詳細(xì)說明了使用Nginx作為靜態(tài)資源服務(wù)器和反向代理的步驟,以及進(jìn)行性能、安全性測試和備份的重要性,需要的朋友可以參考下2024-09-09
今天小編就為大家分享一篇vue動態(tài)禁用控件綁定disable的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue2?element-ui?el-checkbox視圖不更新問題及解決
作者在開發(fā)過程中遇到了視圖不更新的問題,最終通過改變一個無關(guān)緊要的響應(yīng)式數(shù)據(jù)來解決,讓視圖發(fā)生改變2024-12-12
這篇文章介紹了Vue路由vue-router的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01
element中el-table局部刷新的實(shí)現(xiàn)示例
本文主要介紹了element中el-table局部刷新的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue中div contenteditable 的光標(biāo)定位方法
今天小編就為大家分享一篇Vue中div contenteditable 的光標(biāo)定位方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08