本文主要是介绍element emitter broadcast向下广播 dispatch向上分派,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
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])
这篇关于element emitter broadcast向下广播 dispatch向上分派的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!