vue組件通訊方式總結

1.props,emit

最經常使用

https://cn.vuejs.org/v2/api/#...

https://cn.vuejs.org/v2/guide...

2.$parent和$children

指定已建立的實例之父實例，在二者之間創建父子關係。子實例能夠用 this.$parent 訪問父實例，子實例被推入父實例的 $children 數組中。

注意⚠️節制地使用 $parent 和 $children - 它們的主要目的是做爲訪問組件的應急方法。更推薦用 props 和 events 實現父子組件通訊

https://cn.vuejs.org/v2/api/#...

3.provide 和 inject

這對選項須要一塊兒使用，以容許一個祖先組件向其全部子孫後代注入一個依賴，不論組件層次有多深，並在起上下游關係成立的時間裏始終生效。

注意⚠️ 主要爲高階插件/組件庫提供用例。並不推薦直接用於應用程序代碼中。
https://cn.vuejs.org/v2/api/#...

4..sync語法糖

2.3.0+ 新增

在有些狀況下，咱們可能須要對一個 prop 進行「雙向綁定」。不幸的是，真正的雙向綁定會帶來維護上的問題，由於子組件能夠修改父組件，且在父組件和子組件都沒有明顯的改動來源。
https://cn.vuejs.org/v2/guide...

5.$attrs 和 $listeners

2.4.0 新增

$attrs負責收納屬性

$listeners負責收納事件

https://cn.vuejs.org/v2/api/#...

6.vuex 非父子組件

https://vuex.vuejs.org/zh/

7.event bus（事件總線）非父子組件

event bus事件總線，組件之間的通訊須要使用一箇中介來實現，在event bus裏面使用一個空的Vue實例來作爲通訊的橋樑

事件總線是高手在民間