Vue組件通訊之非父子組件傳值

前言：

若是想要了解非父子關係的組件傳值，最好是在瞭解父傳子和子傳父的基礎上在來了解非父子傳值可能會有更透徹的思路。

由於非父子傳值是經過定義事件總線來代理實現父傳子+子傳父從而實現的傳值方式。

這是我總結的父子傳值相關的知識，可供參考: http://www.javashuo.com/article/p-umgtwkqr-dy.html

 

而後大概回顧一下父子傳值的過程:

 

 

 

根據上述信息可知，若是兩個組件須要傳遞值那麼須要這兩個組件之間是父子關係才能傳遞數據。

那麼若是有這樣一個組件，既能夠幫你傳遞數據，又能夠幫你接收數據該多好啊？

 

因而乎，一個叫事件總線的概念出現了，它就能夠幫助實現你想要的這些功能。

瞭解事件總線以前，須要先看下兩個重要的方法。

 

前置知識: 

1. $emit(event, data)方法

　　event: 觸發的事件類型

　　data: 觸發這個事件時傳遞的參數

 

2. $on(event, callBack(data))方法

　　event: 綁定的事件類型

　　callBack: 綁定的這個事件所對應的回調函數，其默認的第一個參數data是使用$emit觸發這個事件時所傳遞的參數

 

在瞭解了這兩個方法後，再來看下面的這張圖：

 

 若是仍是不太明白，那就轉換成代碼在分析一下：

 

首先，定義一個eventBus: 

// eventBus.js  // 事件總線： 只須要導出一個Vue實例便可
import Vue from 'vue' export default new Vue()

 

而後，在A組件中導入eventBus, 並觸發自定義的AtoB事件

// A.vue
// 導入eventBus
import eventBus from "./eventBus"

// 觸發事件並傳遞參數
eventBus.$emit("AtoB", "Data_A")

 

最後，在B組件中導入eventBus，並監聽自定義的AtoB事件

// B.vue
// 導入eventBus
import eventBus from "./eventBus"

// 觸發事件並傳遞參數
eventBus.$on("AtoB", data =>{ console.log(data); // "Data_A" 
})

 

總結：

• 要想了解非父子傳值必先了解父子間的傳值
• 非父子傳值的核心在於經過事件總線做爲一箇中介
• 而後經過在「傳遞值」的組件中觸發事件總線的某個自定義的事件來傳遞一個值(若是是多個值，能夠傳遞一個對象)
• 最後在「接收值」的組件中來監聽事件總線中你觸發的那個自定義事件來接收數據

 

 

原文出處：https://www.cnblogs.com/ViavaCos/p/11986576.html