? ? ? ?React和Vue是兩個(gè)某些方面的都非常相似的框架，在組件間數(shù)據(jù)通訊思路也基本相似宇立，下面我主要講講二者在父子組件間通信、非父子組件間的通訊代咸、以及父組件向下數(shù)據(jù)廣播等幾個(gè)方面講講如何實(shí)現(xiàn)組件中的數(shù)據(jù)通訊国撵，當(dāng)然二者現(xiàn)在都用對(duì)應(yīng)的狀管理的庫(kù)陵吸，像vue的Vuex,React的Mobx和Redux都是比較好的狀態(tài)管理方案。若是項(xiàng)目本身不是較復(fù)雜且全局公用的參數(shù)很少的話介牙，建議沒(méi)必要引入狀態(tài)管理方案壮虫，直接利用框架現(xiàn)有的通訊方式去處理數(shù)據(jù)的通訊。
單向數(shù)據(jù)流环础，首先大家得明白R(shí)eact和Vue父子組件間都是單向數(shù)據(jù)流的.(即父組件往子組件傳遞數(shù)據(jù)囚似，但是子組件修改這個(gè)數(shù)據(jù)不會(huì)造成父組件傳遞的這個(gè)數(shù)據(jù)的改變，注：Vue1.x中利用props的twoWay和.sync綁定修飾符就可以實(shí)現(xiàn)props的雙向綁定功能线得，但是在Vue2中已經(jīng)廢棄了此功能)
1饶唤、父子組件中通信，react和vue的方式幾乎完全一樣贯钩，都是通過(guò)props向子組件傳遞數(shù)據(jù)募狂，較簡(jiǎn)單。具體可查看官方文檔角雷。
2祸穷、事件廣播（父組件的某個(gè)數(shù)據(jù)向下廣播，下面的子組件都可以接收）
vue1.x
在vue1.x中父組件通過(guò)broadcast來(lái)實(shí)現(xiàn)向下所有的子組件傳遞數(shù)據(jù)勺三，而子組件可以通過(guò)dispatch層層向上向各父組件傳遞數(shù)據(jù)粱哼。子組件通過(guò)dispatch事件冒泡沿著各級(jí)父組件層層向上傳遞數(shù)據(jù)。(broadcast和dispatch已經(jīng)在vue2.x中被廢除了檩咱，vue2.x版本推薦使用中央事件總線$emit揭措、$on)基本使用如下：
Vue 2.x
vue2.0里面已經(jīng)廢除了broadcast炊汹、dispatch躬充，替代方案官方推薦vuex或者全局事件驅(qū)動(dòng)，若果使用場(chǎng)景不復(fù)雜的話讨便，vue2.0里面非父子組件的通信（包含隔代從屬關(guān)系）推薦使用一個(gè)空的 Vue 實(shí)例作為中央事件總線（$emit/$on）去實(shí)現(xiàn)數(shù)據(jù)的傳遞充甚。這一塊官網(wǎng)上并沒(méi)有做很清晰的解釋?zhuān)约好鲿r(shí)可能會(huì)犯點(diǎn)小錯(cuò)，其實(shí)很簡(jiǎn)單霸褒，下面我就講我寫(xiě)的代碼粘貼出來(lái)供大家參考：
基本思路：①創(chuàng)建一個(gè)bus.js文件伴找，在里面輸出一個(gè)空的vue的實(shí)例，作為中央事件總線（也可以不用單獨(dú)創(chuàng)立一個(gè)文件）
? ? ? ? ? ? ? ? ? ②在觸發(fā)數(shù)據(jù)改變的組件中引入bus.js中創(chuàng)建的實(shí)例废菱，并在相應(yīng)的事件處理程序中bus.$emit（‘名字’技矮，傳遞的數(shù)據(jù)）去觸發(fā)數(shù)據(jù)傳遞
? ? ? ? ? ? ? ? ? ③在監(jiān)聽(tīng)數(shù)據(jù)的組件中引入bus.js中創(chuàng)建的實(shí)例抖誉，在created選項(xiàng)中bus.$on('名字'，function（傳遞的數(shù)據(jù)）{// 傳回?cái)?shù)據(jù)相應(yīng)的處理})監(jiān)聽(tīng)傳來(lái)的數(shù)據(jù)衰倦，在回調(diào)函數(shù)中進(jìn)行相應(yīng)的處理袒炉。
React
react中也有類(lèi)似的父組件向所有的子組件傳遞數(shù)據(jù)的方式，若在使用場(chǎng)景不太復(fù)雜的情況下也可以使用樊零。下面代碼僅以ES6的方式去展示代碼的書(shū)寫(xiě)我磁。下圖代碼組件的層級(jí)關(guān)系為One -----> Three ------->Four，代碼實(shí)現(xiàn)在Four組件中直接使用One組件中的state驻襟。
基本思路：①在頂層父組件中使用childContextTypes去指定傳入值的要求夺艰，和父子組件間定義props一樣。在getChildContext方法 中return出你要向下傳遞state塑悼。
? ? ? ? ? ? ? ? ? ②在需要接收父組件傳遞的數(shù)據(jù)的子組件中使用contextTypes指定值的要求劲适，在子組件代碼中直接使用“ this.context.名稱(chēng) ”即可使用這個(gè)值楷掉。
