element emitter broadcast向下广播 dispatch向上分派

eadela2023-11-23 12:08

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 是空数组，接收到的会是 undefined
      broadcast.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])