vue父子組件通信

vue父子組件通信方式有哪些？我們一起了解一下吧！

vue父子組件通信方式有Prop，$emit、$attrs 、 $listeners、provide 、 inject ，sync語法糖和一些其他方式。以下是常用通信方式的具體介紹。

1、prop
這個在我們日常開發當中用到的非常多。簡單來說，我們可以通過 Prop 向子組件傳遞數據。用一個形象的比喻來說，父子組件之間的數據傳遞相當於自上而下的下水管子，只能從上往下流，不能逆流。這也正是 Vue 的設計理念之單向數據流。而 Prop 正是管道與管道之間的一個銜接口，這樣水（數據）才能往下流。

2、$emit
官方說法是觸發當前實例上的事件。附加參數都會傳給監聽器回調。

大致邏輯如下：當我在頁面上點擊按鈕時，觸發了組件 MyButton 上的監聽事件 greet，並且把參數傳給了回調函數 sayHi 。說白了，當我們從子組件 Emit（派發）一個事件之前，其內部都提前在事件隊列中 On（監聽）了這個事件及其監聽回調。

3、.sync 修飾符
在 [email protected] 的時候曾作爲雙向綁定功能存在，即子組件可以修改父組件中的值。因爲它違反了單向數據流的設計理念，所以在 [email protected] 的時候被幹掉了。但是在 [email protected]+ 以上版本又重新引入了這個 .sync 修飾符。但是這次它只是作爲一個編譯時的語法糖存在。它會被擴展爲一個自動更新父組件屬性的 v-on 監聽器。說白了就是讓我們手動進行更新父組件中的值了，從而使數據改動來源更加的明顯。

4、$attrs

包含了父作用域中不作爲 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 prop 時，這裏會包含所有父作用域的綁定 (class 和 style 除外)，並且可以通過 v-bind="$attrs" 傳入內部組件——在創建高級別的組件時非常有用。

5、$listeners

包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部組件——在創建更高層次的組件時非常有用。

6、EventBus

思路就是聲明一個全局Vue實例變量EventBus，把所有的通信數據，事件監聽都存儲到這個變量上，這樣就到達在組件間實現數據共享，有點類似Vuex。