資訊專欄INFORMATION COLUMN
摘要：本身提供哪幾種通信方式首先靈感源于，支持雙向綁定，本質還是單向數據流。跟一樣，組件間最基本的數據流是通過向子組件傳遞數據。但是在卻很少使用，因為組件可以自定義事件，即后面的組件間通信方式其實就是訂閱發布模式。
例子是在 jsrun.net 平臺編寫，不支持移動端平臺，所以本文建議在 PC 端進行閱讀。
Vue 是數據驅動的視圖框架，那么組件間的數據通信是必然的事情，那么組件間如何進行數據傳遞呢？
首先組件間通信有父子組件、兄弟組件、堂兄弟組件、叔侄組件等，分類太多可能不好理解，我們暫且分為：
父子組件通信
子父組件通信
非父子組件通信
兄弟組件通信
非兄弟組件通信（不是直屬關系，如堂兄組件、叔侄組件等）
后續的組件間通信方式的例子就會根據這些分類進行說明。
Vue 本身提供哪幾種通信方式？首先 Vue 靈感源于 angular，支持雙向綁定，Vue 本質還是單向數據流。跟 React 一樣，組件間最基本的數據流是通過 prop 向子組件傳遞數據。
這里列舉一下 Vue 本身支持的通信方式：
prop
$emit
這個其實類似 React 的 props 回調。
provide / inject
如果你熟悉 React，這與 React 的 context 特性很相似。
那么有人說 $attrs 、$listener 呢？這些嚴格意義上不能歸納為數據流的通信方式，這些只是輔助屬性，本人也不建議過多的使用這些 $ 屬性，除了一些有必要的場景。
propprop 是 Vue 三大核心概念之一，prop 在組件中無處不在。prop 只可以從上一級組件傳遞到下一級組件（父子組件），即所謂的單向數據流。而且 prop 只讀，不可被修改，所有修改都會失效并警告。
可以先閱讀官網的 通過 Prop 向子組件傳遞數據 的教程。
父子組件通信這里也編寫了一個簡單的例子 http://jsrun.net/wXyKp/edit。
子父組件通信不是說是單向數據流嗎，怎么還可以使用 prop 進行子父組件通信？這樣想是對的，prop 是無法向上傳遞數據，但是我們可以使用回調啊。數據流的確向上走了，但是這并不違反單向數據流的思想，這個并不會使得數據流混亂，還是比較清晰。
這個 prop 回調方式，在 React 會經常使用。但是在 Vue 卻很少使用，因為組件可以自定義事件，即后面的 $emit 組件間通信方式（其實就是訂閱發布模式）。
例子可以看這個 http://jsrun.net/aXyKp/edit。
兄弟組件的通信如果你了解上面提到的父子組件通信和子父組件通信，那么你就很容易理解兄弟組件通信的方式。
可以看下這個例子 http://jsrun.net/QyyKp/edit。
兄弟組件的通信就是父子組件通信和子父組件通信的結合，需要父組件作為中間組件進行數據傳遞。
那么這樣豈不是很麻煩？的確是多了一步，所以我們基本不會使用這種方式進行數據傳遞。
但是單向數據流思想是不存在交叉的數據流，即使 vuex 也無法避免這一步，但是 vuex 用法上你感覺不到這一步。所以請不要隨意引入第三方訂閱發布的類庫來解決這個問題，兄弟組件不可以直接通信的問題，這會造成數據流混亂，這就完全違反了單向數據流的思想。
可以看下這個強烈不建議的使用例子 http://jsrun.net/PyyKp/edit，這種使用方式完全違背了單向數據流的思想，當程序復雜起來，數據流會特別混亂，項目不好維護。
$emit官網教程可以看監聽子組件事件。
$on 和 $emit 是 Vue 自帶的訂閱發布模式，可以自定義事件。在子父組件通信中可以使用這種模式代替 prop 回調模式，相對便捷一點。
每個組件的 $on 和 $emit 都是獨立的，$emit 只會觸發當前組件的 $on 事件。
對比例子可以看這個 http://jsrun.net/cXyKp/edit。
子父組件通信可以看上面提到的例子可以看這個 http://jsrun.net/aXyKp/edit。
provide / inject首先你需要看官網教程 https://cn.vuejs.org/v2/api/#...。 prviode / inject 在 vue@2.2.0 才新增的。這個也是作者參考 react context ，新加的用法，如果你熟悉 react，那么這個很好理解。
在組件嵌套比較深的情況下，我們再使用 prop 層層傳遞數據將是個噩夢。 孫輩組件想直接獲取到祖輩的數據，而不用經過父輩組件，該怎么處理呢？provide / inject 可以解決這個問題。
可看這個使用例子 http://jsrun.net/nXyKp/edit。
從上面的例子運行可知，provide 執行與 beforeCreate 和 created 之間，也可以訪問 data 和 inject 的數據。
其他的通信方式除了 vue 本身支持的通信方式，還有其他的嗎？當然有 vuex 就是 vue 官方的數據流管理類庫。
上面提到的 vue 本身支持的通信方式，涉及到的都是父子或者子父組件的通信，那么非父子組件通信呢？通過 vuex 我們就可以很簡單的進行非父子組件的通信了，使用了 vue 支持各種方式的通信（包括父子組件、子父組件的通信）。
結合單向數據流的思想，我們難道不可以統一一個地方集中管理數據（我們簡稱 store），然后每個組件可以直接和 store 通信嗎？答案當然可以，這就是我們 vuex 所做的事情，這個跟 react 的 redux、mobx 等類庫的思想是一致的。
props 的通信方式是這樣的，component -> component 。
而 vuex 的通信方式是這樣的，component（傳遞數據） -> store -> （數據變化更新組件）component，可以簡單理解為 component -> store -> component。我們在中間搭建了數據管理層，那么這樣我們就可以更好的管理數據了，而且數據流符合單向數據流的思想，數據都是從 store 流向 component，component 可以是任何嵌套層次的組件。
理論上我們也可以在 vue 上使用 redux，但是沒人會這樣做，不合適，vuex 才是量身定制的。
參考文章vue組件間通信六種方式（完整版）
學習和總結文章同步發布于 https://github.com/xianshanna...，有興趣可以關注一下，一起學習和進步。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109778.html
摘要：本文總結了組件間通信的幾種方式，如和，以通俗易懂的實例講述這其中的差別及使用場景，希望對小伙伴有些許幫助。狀態改變提交操作方法。 前言 組件是 vue.js最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數據無法相互引用。一般來說，組件可以有以下幾種關系：showImg(https://segmentfault.com/img/remote/146000001...
摘要：為此可以使用為子組件指定一個索引。訪問子組件當和一起使用時，是一個數組或對象，包含相應的子組件。 父子通信目前有四種方式： 1.父組件傳遞數據給子組件父組件數據如何傳遞給子組件呢？可以通過props屬性來實現父組件： //這里必須要用 - 代替駝峰data(){ return { msg: [1,2,3] };} 子組件通過props來接收數據:方式1：props: [childMs...
摘要：本文總結了組件間通信的幾種方式，如和，以通俗易懂的實例講述這其中的差別及使用場景，希望對小伙伴有些許幫助。狀態改變提交操作方法。前言 組件是 vue.js最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數據無法相互引用。一般來說，組件可以有以下幾種關系： showImg(https://user-gold-cdn.xitu.io/2019/5/17/16ac35bf...
摘要：是雖說吸取了的的思想，但是它是單向數據流的，也就是說子組件無法直接改變父組件狀態。父組件向子組件傳遞數據該方式的數據傳遞是遵循單向數據流的規則的，因此使用起來十分的自然。 眾所周知，Vue 是基于組件來構建 web 應用的。組件將模塊和組合發揮到了極致。Vue 是雖說吸取了 AngularJs 的 MVVM的思想，但是它是單向數據流的，也就是說子組件無法直接改變父組件狀態。下面總結出常...
閱讀 1938·2021-11-24 09:39
閱讀 3277·2021-09-22 14:58
閱讀 1162·2019-08-30 15:54
閱讀 3315·2019-08-29 11:33
閱讀 1788·2019-08-26 13:54
閱讀 1598·2019-08-26 13:35
閱讀 2468·2019-08-23 18:14
閱讀 762·2019-08-23 17:04
