本文由作者鄭海波授權網易雲社群發布。
背景在元件化不斷深入的大環境下，無論使用哪種 mdv 框架都最終會遇到乙個頭疼的問題，就是「跨元件通訊」。
下圖是個簡單的例子
這裡包含「事件通訊」和「資料通訊」兩個維度。
事件傳遞
為了將事件 click 從 傳遞到最外層元件，需要依次通過 和 等可能本不關心這個事件的元件（即使例子裡已經使用了proxy的簡化語法）
資料傳遞
為了從 傳遞 title 這個 prop 到 , 需要層層跨越 、這些本不需要關心 title屬性 的元件。
以上處理方式除了帶來效能上的損耗之外，更麻煩的就是造成了可維護性的急速下降。
顯而易見的事件通訊解決方案
最直接的做法就是引入乙個「中介者」，簡而言之就是乙個全域性的「跳板」，下例就是乙個事件中介者
mediator.js
const regular = require('regularjs');const emitter = new regular;//每個regular元件都是乙個事件發射器module.exports =
top.js
const = require('./mediator')const regular = require('regularjs');const top = regular.extend()
}})leafnode.js
const = require('path/to/mediator')const regular = require('regularjs');const leafnode = regular.extend( )
}})mediator 作為乙個全域性單例直接被 leafnode 和 top 引用，通過它實現了直接通訊.
更麻煩的兄弟節點之間的通訊當然也可以這樣來解決。
顯而易見的解決方案引出的另乙個顯而易見的問題
上述中介者的引入的最大問題就是，所有相關元件都在 定義時 引入了對emitter的 全域性耦合， 這個將導致元件無法在多工程間被復用。
一種合理的解決方案就是將對emitter的耦合, 延遲到例項化階段。
在regular之前的版本裡，很多朋友會通過this.$parent或this.$outer等可控性很差的方式來實現，在v0.6有了一種更好的方式。
modifybodycomponent 新生命週期
在 regular 的 v0.6 引入了乙個新的生命週期叫 modifybodycomponent ，它用來劫持到元件包裹的所有內部元件的初始化週期。
我們用乙個簡單例子來實現下emitter的動態注入
broadcastor.js
const regular = require('regularjs');const broadcastor = regular.extend(,
modifybodycomponent( component, next )})
top.js
// const = require('./mediator')const regular = require('regularjs');const top = regular.extend()
}})leafnode.js
// const = require('path/to/mediator')const regular = require('regularjs');const leafnode = regular.extend( )
}})main.js (入口)
new regular(})
這樣所有的元件宣告都取消了對全域性 emitter 的直接依賴，而是在入口(main.js) 動態傳入了乙個emitter。
生命週期
需要注意的是modifybodycomponent 會在 component本身compile之後執行, 但在init之前執行。以上面的例子為代表, 完整生命週期如下.
broadcastor.config -> broadcastor.compile
- top.config -> top.compile
- leafnode.config -> leafnode.compile
- broadcastor.modifybodycomponent(leafnode)
- leafnode.init
- broadcastor.modifybodycomponent(top)
- top.init
React元件通訊 高階元件
子父元件通訊 非父子元件通訊 跨元件通訊 在react沒有類似vue中的事件匯流排來解決這個問題，我們只能借助它們共同的父級元件來實現，將非父子關係裝換成多維度的父子關係。react提供了contextapi來實現跨元件通訊,react 16.3之後的contextapi較之前的好用。使用流程 im...
Vue元件跨層級通訊
正常元件間通訊 父 子元件 是通過屬性傳遞 子 父元件 是通過this.emit 傳遞 this.emit 返回的是this,如果需要一些值 可使用callback方式傳遞 provide 和 inject 這對選項需要一起使用，以允許乙個祖先元件向其所有子孫後代注入乙個依賴，不論元件層次有多深，並...
react元件跨層級通訊context
react 中使 context 實現祖代元件向後代元件跨層級傳值。vue中的 provide inject 於context context api react.createcontext 建立 個 context 物件。當 react 渲染 個訂閱了這個context 物件的元件，這個元件會從元...