Vue組件如何通信

如上圖所示, A與B、A與C、B與D、C與E組件之間是父子關係； B與C之間是兄弟關係；A與D、A與E之間是隔代關係； D與E是堂兄關係（非直系親屬） 針對以上關係我們歸類爲：

1. 父子組件之間通信
2. 非父子組件之間通信(兄弟組件、隔代關係組件等)

Vue組件通信的方法如下:

• props/$emit+v-on: 通過props將數據自上而下傳遞，而通過$emit和v-on來向上傳遞信息。prop 只可以從上一級組件傳遞到下一級組件（父子組件），即所謂的單向數據流。而且 prop 只讀，不可被修改，所有修改都會失效並警告
• EventBus: 通過EventBus進行信息的發佈與訂閱。當項目較大,就容易造成難以維護的災難
• vuex: 是全局數據管理庫，可以通過vuex管理全局的數據流。Vuex 解決了多個視圖依賴於同一狀態和來自不同視圖的行爲需要變更同一狀態的問題，將開發者的精力聚焦於數據的更新而不是數據在組件之間的傳遞上。
• $attrs/$listeners: Vue2.4中加入的$attrs/$listeners可以進行跨級的組件通信
• provide/inject：以允許一個祖先組件向其所有子孫後代注入一個依賴，不論組件層次有多深，並在起上下游關係成立的時間裏始終生效，這成爲了跨組件通信的基礎。

常見使用場景可以分爲三類:

1. 父子組件通信: props; $parent / $children; provide / inject ; ref ; $attrs / $listeners
2. 兄弟組件通信: eventBus ; vuex
3. 跨級通信: eventBus；Vuex；provide / inject 、$attrs / $listeners