最詳細的vue的父子元件以及非父子元件之間的通訊方式
1.父元件傳遞資料給子元件
父元件資料如何傳遞給子元件呢？可以通過props屬性來實現
父元件：
//這裡必須要用 - 代替駝峰
data(){ return { msg: [1,2,3] }; }
子元件通過props來接收資料: 方式1：
props: ['childMsg']
方式2 :
props: { childMsg: Array //這樣可以指定傳入的型別，如果型別不對，會警告 }
方式3：
props: { childMsg: { type: Array, default: [0,0,0] //這樣可以指定預設的值 } }
這樣呢，就實現了父元件向子元件傳遞資料.
【案例演示1】
父元件裡面的內容
image.png子元件裡面的內容
image.png注意：這裡的第一個父元件傳值給子元件分為傳引用和傳值兩種方式，傳引用的時候改變引用關係，則子元件的也會變化（改變父元件中陣列的引用時可以看到子元件的props陣列隨之改變，而子元件中繫結的陣列確並沒有隨之改變）傳值則不會
2.子元件與父元件通訊
那麼，如果子元件想要改變資料呢？這在vue中是不允許的，因為vue只允許單向資料傳遞，這時候我們可以通過觸發事件來通知父元件改變資料，從而達到改變子元件資料的目的.
子元件: <div @click="up">
methods: { up() { this.$emit('upup','hehe'); //主動觸發upup方法，'hehe'為向父元件傳遞的資料 } }
父元件:
//監聽子元件觸發的upup事件,然後呼叫change方法
methods: { change(msg) { this.msg = msg; } }
【案例演示2】
父元件裡面的內容
image.png子元件裡面的內容
image.png注意：簡而言之就是先子元件定義一個事件，然後通過$emit方式
傳遞過去一個事件名稱，，父元件首先在html上用@事件名######="子元件自定義事件名"來接受，最後就是呼叫父元件剛剛定義的######事件，傳入一個引數，就可以接收來自子元件的事件觸發及其參######數傳遞。
3.非父子元件通訊
如果2個元件不是父子元件那麼如何通訊呢？這時可以通過eventHub來實現通訊. 所謂eventHub就是建立一個事件中心，相當於中轉站，可以用它來傳遞事件和接收事件.
let Hub = new Vue(); //建立事件中心
元件1觸發：
methods: { eve() { Hub.$emit('change','hehe'); //Hub觸發事件 } }
元件2接收:
created() { Hub.$on('change', () => { //Hub接收事件 this.msg = 'hehe'; }); }
這樣就實現了非父子元件之間的通訊了.原理就是把Hub當作一箇中轉站！
以下是詳細程式碼
<meta charset="utf-8">
Vue 官網介紹了非父子元件通訊方法：
image不過官網說的太簡單了，新手看完估計還是一臉懵逼。還有這個空的 Vue 例項放到哪裡合適也值得商榷。
這篇文章的目的就是用一個簡單的例子讓你明白如何用 Bus