emitter
項目使用element的emitter.js,做個使用記錄
function broadcast(componentName, eventName, params) {this.$children.forEach(child => {const name = child.$options.name;if (name === componentName) {child.$emit.apply(child, [eventName].concat(params));} else {// todo 如果 params 是空數組,接收到的會是 undefinedbroadcast.apply(child, [componentName, eventName].concat([params]));}});
}
export default {methods: {dispatch(componentName, eventName, params) {let parent = this.$parent || this.$root;let name = parent.$options.name;while (parent && (!name || name !== componentName)) {parent = parent.$parent;if (parent) {name = parent.$options.name;}}if (parent) {parent.$emit.apply(parent, [eventName].concat(params));}},broadcast(componentName, eventName, params) {broadcast.call(this, componentName, eventName, params);}}
};
Element dispatch 和 broadcast 都是 JavaScript 中的事件相關概念,但它們有些不同:
Element dispatch 是用于在特定的 HTML 元素上分派(即發起)自定義事件的過程。只有特定的元素會收到這些事件。
Broadcast 是一種在整個頁面(或文檔)上廣播事件并在其所有子元素中調用處理程序的方式。在這種情況下,父元素會將事件傳遞給其子元素,直到找到一個可以處理該事件的元素。
在 Element dispatch 中,事件只會被處理它所分派到的元素。而 Broadcast 則會在所有子元素中調用處理程序,所以在一個具有多層嵌套元素的頁面上,可能會有多個元素響應同一個 broadcast 事件。
注意:emitter的node包,是支持兄弟組件通信的
call與apply的區別:
call()和apply()這兩個方法的作用可以簡單歸納為改變this指向,從而讓我們的this指向不在是誰調用了函數就指向誰。
call()方法的作用和 apply() 方法類似,區別就是 call()方法接受的是 參數列表,而 apply()方法接受的是 一個參數數組。
function.call( thisArg, arg1, arg2, ...)
func.apply( thisArg, [argsArray])