vue元件之間的通訊包括三種：

1.父元件向子元件通訊

2.子元件向父元件通訊

3.同級元件之間的通訊

首先，看一下vue-cli工程的部分目錄：

說明一下：App.vue是父元件，ZiZuJianOne.vue和ZiZuJianTwo.vue是子元件，兩個子元件是在父元件App.vue裡註冊的。

①父元件App.vue如何向子元件ZiZuJianOne.vue通訊的

父元件App.vue的程式碼：

子元件ZiZuJianOne.vue的程式碼：

解釋：

①在父元件的<zi-zu-jian-one>標籤里加上msgfromfather 屬性，當然，這個屬性是我們自己定義的，裡面給它賦上一個值，上面這個案例是一個字串I am App.vue

②然後在子元件裡要想獲得這個自定義屬性的值，首先，在子元件里加上選項props，然後在模板中通過{{ XXX }}使用。

②子元件ZiZuJianOne.vue如何向父元件App.vue通訊的

子元件ZiZuJianOne.vue的程式碼：

父元件App.vue的程式碼：

解釋：

①在父元件的<zi-zu-jian-one>標籤裡使用v-on自定義繫結一個child-tell-me事件，然後給這個事件新增listenToSon方法，那麼，怎麼觸發這個child-tell-me事件，從而讓它呼叫呢listenToSon方法呢？通過this.$emit('事件名稱'，'傳入引數')

②上面這個案例，我在子元件通過點選按鈕來觸發這個事件，然後還把子元件裡面的sonWord資料傳遞過去，父元件裡面的listenToSon方法就會被執行，然後我把傳遞過來的sonWord賦值給父元件裡面的childWord，從而達到通訊的效果。

③同級元件的通訊：子元件ZiZuJianOne.vue和子元件ZiZuJianTwo.vue之間的通訊

要點：建立一個新的Vue例項，以後它就承擔起了元件之間通訊的橋樑了，也就是中央事件匯流排。

方法：新建一個js檔案,命名為event.js。

event.js的程式碼：

子元件ZiZuJianOne.vue的程式碼：

子元件ZiZuJianTwo.vue的程式碼：

 解釋：

①在兩個元件中均引入：import bus from '../assets/event.js'；

②使用bus.$emit('事件名稱'，'傳入引數')，作為傳送訊息的那一方；

③使用bus.$on('事件名稱'，'回撥函式')，作為接收訊息的那一方。

end！