本文主要對vue 用$emit 與 $on 來進行組件之間的數(shù)據(jù)傳輸.

十年的屯留網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都營銷網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整屯留建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)從事“屯留網(wǎng)站設(shè)計”,“屯留網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

主要的傳輸方式有三種：

1.父組件到子組件通信

2.子組件到父組件的通信

3.兄弟組件之間的通信

一、父組件傳值給子組件

父組件給子組件傳子，使用props

//父組件：parent.vue



//子組件：child.vue

2.子組件到父組件的通信

使用 $emit(eventname,option) 觸發(fā)事件,

參數(shù)一：自定義事件名稱，寫法,小寫或者用-連接，如event,event-name 不能寫駝峰寫法(eventName)

子組件給父組件傳值，可以在子組件中使用$emit觸發(fā)事件的值傳出去,父組件通過事件監(jiān)聽，獲取數(shù)據(jù)

但是，這里有一個問題，

1、究竟是由子組件內(nèi)部主動傳數(shù)據(jù)給父組件，由父組件監(jiān)聽接收（由子組件中操作決定什么時候傳值）

2、還是通過父組件決定子組件什么時候傳值給父組件，然后再監(jiān)聽接收 （由父組件中操作決定什么時候傳值）

兩種情況都有

2.1 : $meit事件觸發(fā),通過子組件內(nèi)部的事件觸發(fā)自定義事件$emit

2.2 : $meit事件觸發(fā)， 可以通過父組件操作子組件 (ref)的事件來觸發(fā) 自定義事件$emit

第一種情況：

//父組件：parent.vue


//子組件：child.vue

第二種情況：

//父組件：parent.vue


//子組件：child.vue

將兩者情況對比，區(qū)別就在于$emit 自定義事件的觸發(fā)是有父組件還是子組件去觸發(fā)

第一種，是在子組件中定義一個click點擊事件來觸發(fā)自定義事件$emit,然后在父組件監(jiān)聽

第二種，是在父組件中第一一個click點擊事件，在組件中通過refs獲取實例方法來直接觸發(fā)事件,然后在父組件中監(jiān)聽

3.兄弟組件之間的通信

 （1）、兄弟之間傳遞數(shù)據(jù)通過事件

 （2）、創(chuàng)建一個新Vue的實例，讓各個兄弟共用同一個事件機制。（關(guān)鍵點）

 （3）、傳遞數(shù)據(jù)方，通過事件觸發(fā)$emit(方法名，傳遞的數(shù)據(jù))。

 （4）、接收數(shù)據(jù)方，在mounted()鉤子函數(shù)(掛載實例)中 觸發(fā)事件$on(方法名，callback(接收數(shù)據(jù)的數(shù)據(jù)))，此時callback函數(shù)中的this已經(jīng)發(fā)生了改變，可以使用箭頭函數(shù)。

//建立一個空的Vue實例,將通信事件掛載在該實例上
//emptyVue.js
import Vue from 'vue'
export default new Vue()
//兄弟組件a:childa.vue


//兄弟組件b:childb.vue


//父組件：parent.vue

到此，vue中的組件通信傳值基本可以搞定了，但是對于大型復(fù)雜的項目，建議采用vuex 狀態(tài)管理更適合....

推薦參考學(xué)習(xí)：https://vuex.vuejs.org/zh-cn/

    https://cn.vuejs.org/v2/api/#vm-emit

   https://cn.vuejs.org/v2/api/#vm-on

總結(jié)

以上所述是小編給大家介紹的vue中的$emit 與$on父子組件與兄弟組件的之間通信方式，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！