前言：

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

因為非父子傳值是通過定義事件匯流排來代理實現父傳子+子傳父從而實現的傳值方式。

這是我總結的父子傳值相關的知識，可供參考: https://www.cnblogs.com/ViavaCos/p/11712131.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" 
})

總結：

• 要想了解非父子傳值必先了解父子間的傳值
• 非父子傳值的核心在於通過事件匯流排作為一箇中介
• 然後通過在“傳遞值”的元件中觸發事件匯流排的某個自定義的事件來傳遞一個值(如果是多個值，可以傳遞一個物件)
• 最後在“接收值”的元件中來監聽事件匯流排中你觸發的那個自定義事件來接收資料