這次帶給大家怎樣操作vue中$emit 與$on父子與兄弟組件通信,操作vue中$emit 與$on父子與兄弟組件通信的注意事項有哪些,下面就是實戰案例,一起來看一下。
主要的傳輸方式有三種:
1.父元件到子元件通訊
2.子元件到父元件的通訊
#3.兄弟元件之間的通訊
一、父元件傳值給子元件
#父元件給子元件傳子,使用props
//父组件:parent.vue//子组件:child.vue
{{vals}}
2.子元件到父元件的通訊
使用$emit(eventname,option)
觸發事件,
參數一:自訂事件名稱,寫法,小寫或用-連接,如event,event-name 不能寫駝峰寫法(eventName)
子元件給父元件傳值,可以在子元件中使用$emit觸發事件的值傳出去,父元件透過事件監聽,取得資料
但是,這裡有一個問題,
1、究竟是由子元件內部主動傳資料給父元件,由父元件監聽接收(由子元件中操作決定何時傳值)
2、或透過父元件決定子元件何時傳值給父元件,然後再監聽接收(由父元件中運算決定何時傳值)
兩種情況都有
2.1 : $meit事件觸發,透過子元件內部的事件觸發自訂事件$emit
2.2 : $meit事件觸發, 可以透過父元件運算子元件(ref)的事件來觸發自訂事件$emit
第一種情況:
//父组件:parent.vue
子组件的数据为:{{msg}}
//子组件:child.vue
第二種情況:
//父组件:parent.vue
子组件的数据为:{{msg}}
//子组件:child.vue
將兩者情況對比,差異就在於$emit 自訂事件的觸發是有父元件還是子元件去觸發
第一種,是在子元件中定義一個click點擊事件來觸發自訂事件$emit,然後在父元件監聽
第二種,是在父元件中第一一個click點選事件,在元件中透過refs取得實例方法來直接觸發事件,然後在父元件中監聽
3.兄弟元件之間的通訊
(1) 、兄弟之間傳遞資料通過事件
(2)、建立一個新Vue的實例,讓各兄弟共用同一個事件機制。 (關鍵點)
(3)、傳遞資料方,透過事件觸發$emit(方法名,傳遞的資料)。
(4)、接收資料方,在mounted()鉤子函數(掛載實例)中觸發事件$on(方法名,callback(接收資料的資料)),此時callback函數中的this已經發生了改變,可以使用箭頭函數。
//建立一个空的Vue实例,将通信事件挂载在该实例上 //emptyVue.js import Vue from 'vue' export default new Vue() //兄弟组件a:childa.vueA组件->{{msg}}
//兄弟组件b:childb.vueb组件,a传的的数据为->{{msg}}
//父组件:parent.vue
到此,vue中的元件通訊傳值基本上可以搞定了,但是對於大型複雜的項目,建議採用vuex 狀態管理更適合....
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是如何操作vue中$emit 與$on父子與兄弟組件通信的詳細內容。更多資訊請關注PHP中文網其他相關文章!