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