vue組件之間的通信包括三種：

1.父組件向子組件通信

2.子組件向父組件通信

3.同級組件之間的通信

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

App.vue是父組件，ZiZuJianOne.vue和ZiZuJianTwo.vue是子組件，兩個子組件是在父組件App.vue里注冊的。

一、父組件向子組件通信

說明：

step1:??在父組件的<zi-zu-jian-one>標簽里加上msgfromfather屬性，當然，這個屬性是我們自己定義的，里面給它賦上一個值，上面這個案例是一個字符串Iam App.vue；

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

二、子組件向父組件通信

子組件：單擊事件+$emit(父組件自定義事件+數據)

父組件：自定義事件+數據賦值展示

說明：

step1：在父組件的<zi-zu-jian-one>標簽里使用v-on自定義綁定一個child-tell-me事件，然后給這個事件添加listenToSon方法，那么，怎么觸發這個child-tell-me事件，從而讓它調用呢listenToSon方法呢？通過this.$emit('事件名稱'，'傳入參數')來觸發；

step2：子組件通過點擊按鈕來觸發這個事件，然后還把子組件里面的sonWord數據傳遞過去，父組件里面的listenToSon方法就會被執行，然后我把傳遞過來的sonWord賦值給父組件里面的childWord，從而達到通信的效果。

三、同級組件的通信

要點：建立一個新的Vue實例，以后它就承擔起了組件之間通信的橋梁了，也就是中央事件總線。

方法：新建一個js文件,命名為event.js。

說明：

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

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

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

全文轉載自：https://blog.csdn.net/qq_38563845/article/details/77444973