vue組件通訊之非父子組件通訊

什麼順序不順序的。。

先來講說非父子組件通訊。

首先，咱們先來了解下vue中的

1.$emit  觸發當前實例上的事件，附加參數都會傳給監聽器回調。

2.$on  監聽當前實例上的自定義事件。事件能夠由vm.$emit觸發。回調函數會接收全部傳入事件觸發函數的額外參數。

基礎知識準備好了，下面，咱們就來實現非父子組件之間是怎樣通訊的：

第一步，咱們須要新建一個js文件，用來建立一個Vue實例並暴露出去

建立一個事件中心，至關於中轉站，能夠用它來傳遞事件和接收事件

假如，咱們想要Home組件傳遞自身的msg屬性給News組件，並在News組件中展現出來。

首先，須要在Home組件中導入咱們剛建立的VueEvent

 

Home 組件 代碼 如圖所示

 建立一個按鈕並設置事件

 

在NewsEmit事件中，經過VueEvent.$emit("to_news",this.msg) 將 to_news 事件及數據一併發出

 News 組件  代碼 如圖所示

News 組件中一樣須要引入 VueEvent

 

 

 

 mounted 是vue的生命週期函數中的其中一個，表示，頁面加載完畢執行。

經過 $on 接收 事件，及數據，並賦值給msg，展現到視圖中。

結果如圖所示：

點擊按鈕，數據展現。

 

未完，待續