Vue元件通訊(關係元件和非關係元件)

2021-10-09 15:25:30 字數 2408 閱讀 9972

元件是vue的乙個重要概念,有效的利用了封裝的思想(可以模擬js的函式或者類)。我們通常會把乙個單頁應用中的各種模組拆分成乙個乙個單獨的元件,利用這些元件組裝成乙個完整的功能,具有很好的復用性和維護性。

既然是封裝就涉及輸入和輸出,而多個元件之間如何處理輸入和輸出是我們經常會面臨到的問題,也是我們經常說的元件通訊,通訊的本質是需要通訊的兩個元件可以說上話,所以以下我們針對這個問題進行一些總結。

父元件a使用props向子元件b傳遞訊息,比如父元件中使用可以向子元件傳遞title,子元件b使用 props: ["title"]接收後即可使用(當然props接收的格式有很多詳情可以查閱

子元件b通過$emit向父元件a傳送訊息,父元件a通過v-on或者@獲取傳遞的資訊,比如子元件b通過this.$emit("child", "123");

傳送了123,a元件通過@監聽child 即可捕獲b發出的123。

​    child

​​​

​parent

​    

​​​

child

​​​

parent

​    

​​​

compa

​​

provide() ;

},

//compa

compa

​​​

//compb

compb

​​​

詳細材料詳見

**塊如下:

詳情可以查閱

通過 $emit(eventname, eventhandler)` 傳送乙個事件

通過$off(eventname, eventhandler)` 停止偵聽乙個事件

通過$once(eventname, eventhandler)` 一次性偵聽乙個事件

通過 $on(eventname, eventhandler)` 偵聽乙個事件

//compc

compc

------

attrs}}

以上兩種的**例項如下:$listeners包含了父作用域中的 (不含 .native 修飾器的) v-on 事件***,它可以通過 v-on="$listeners" 傳入內部元件

$attrs包含了父作用域中不作為 prop 被識別 (且獲取) 的 attribute 繫結 (class 和 style 除外),當乙個元件沒有宣告任何 prop 時,這裡會包含所有父作用域的繫結 (class 和 style 除外),並且可以通過 v-bind="$attrs" 傳入內部元件。

搭配 inheritattrs: false 使用

provide / inject api主要解決了跨級元件間的通訊問題,不過它的使用場景,主要是子元件獲取上級元件的狀態,跨級元件間建立了- -種主動提供與依賴注入的關係。

子元件 inject: ["foo", "compa"]。

父元件(只能通過函式返回物件,類似data)

provide提供給子元件要使用的資料,可以在子元件中注入依賴,這樣子元件就可以直接修改祖先元件例項的屬性,比如

這對選項需要一起使用,以允許乙個祖先元件向其所有子孫後代注入乙個依賴,不論元件層次有多深,並在其上下游關係成立的時間裡始終生效。

以上兩種弊端是無法跨級或者兄弟間通訊,**塊如下:

$children獲取當前元件的子元件例項

$parent獲取當前元件的父元件例項

$refs獲取通過 ref 註冊的引用。

ref給元素或子元件註冊引用資訊,引用資訊將會註冊在父元件的 $refs 物件上,如果是在普通的dom元素上使用,引用指向的就是 dom 元素,如果是在子元件上,引用就指向元件的例項。比如,

Vue 元件和外掛程式的關係

我們通常在src的目錄下,新建乙個component資料夾來存放公共的元件,在我們要使用元件的頁面中引入元件,並且進行乙個說明。元件個呼叫它的頁面之間的通訊,就是父元件和子元件的通訊方式。import rule from components rule.vue export default data...

vue 非父子元件通訊

vuex模組狀態管理進行模組間的通訊 1.建立名為store 2.建立名為index.js檔案 內容 import vue from vue import vuex from vuex vue.use vuex const state export default new vuex.store 3....

Vue 非父子元件通訊

元件是vue核心的一塊內容,元件之間的通訊也是很基本的開發需求。元件通訊又包括父元件向子元件傳資料,子元件向父元件傳資料,非父子元件間的通訊。前兩種通訊vue的文件都說的很清楚,但是第三種文件上確只有下面的幾句 具體如何去實現卻沒有很詳細的說明,於是自己試著進行了實現。先看下簡單的通訊效果 就是點選...