vue 元件間通訊的6種方式

父元件通過 props 將資料傳給子元件，子元件通過 $emit ，將資料按照 events 的形式傳送給父元件。

這種方法通過乙個空的 vue 例項作為**事件匯流排（事件中心），用它來觸發事件和監聽事件,巧妙而輕量地實現了任何元件間的通訊，包括父子、兄弟、跨級。當我們的專案比較大時，可以選擇更好的狀態管理解決方案vuex。

實現方法：

var event = new vue ();
event.$emit(事件名,資料);
event.$on(事件名,data => {});

簡要介紹vuex原理：

vuex實現了乙個單向資料流，在全域性擁有乙個state存放資料，當元件要更改state中的資料時，必須通過mutation進行，mutation同時提供了訂閱者模式供外部外掛程式呼叫獲取state資料的更新。而當所有非同步操作(常見於呼叫後端介面非同步獲取更新資料)或批量的同步操作需要走action，但action也是無法直接修改state的，還是需要通過mutation來修改state的資料。最後，根據state的變化，渲染到檢視上。

簡要介紹各模組在流程中的功能：

多級元件巢狀需要傳遞資料時，通常使用的方法是通過vuex。但如果僅僅是傳遞資料，而不做中間處理，使用 vuex 處理，未免有點大材小用。為此vue2.4 版本提供了另一種方法---- $attrs/ $listeners

$attrs：包含了父作用域中不被 props 所識別(且獲取)的特性繫結(class 和 style除外)。當乙個元件沒有宣告任何 props 時，這裡會包含所有父作用域的繫結 (class 和 style 除外)，並且可以通過 v-bind = " $attrs " 傳入內部元件。通常配合 interitattrs 選項一起使用。

$ listeners: 包含了父作用域中的（不含 .native 修飾器的）v-on 事件***。它可以通過 v-on="$listeners" 傳入內部元件

詳細可以參見文章

provide 和 inject 主要為高階外掛程式/元件庫提供用例。並不推薦直接用於應用程式**中。

vue2.2.0 新增api,這對選項需要一起使用，以允許乙個祖先元件向其所有子孫後代注入乙個依賴，不論元件層次有多深，並在起上下游關係成立的時間裡始終生效。一言而蔽之：祖先元件中通過provider來提供變數，然後在子孫元件中通過inject來注入變數。provide / inject api 主要解決了跨級元件間的通訊問題，不過它的使用場景，主要是子元件獲取上級元件的狀態，跨級元件間建立了一種主動提供與依賴注入的關係。

// 父元件
export default 
}// 子元件
export default 
}

provide 和 inject 繫結並不是可響應的。這是刻意為之的。然而，如果你傳入了乙個可監聽的物件，那麼其物件的屬性還是可響應的----vue官方文件

更多詳細可參考

vue 元件間通訊的6種方式

vue元件間通訊方式

Vue元件常用的6種通訊方式

vue元件間通訊的幾種方式

vue 元件間通訊的6種方式

vue元件間通訊方式

Vue元件常用的6種通訊方式

vue元件間通訊的幾種方式

相關推薦