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 是空数组,接收到的会是 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])
相关推荐
羊羊小栈4 小时前
基于「YOLO目标检测 + 多模态AI分析」的光伏板缺陷检测分析系统(vue+flask+模型训练+AI算法)
vue.js·人工智能·yolo·目标检测·flask·毕业设计·大作业
jump_jump5 小时前
超长定时器 long-timeout
前端·javascript·node.js
我登哥MVP6 小时前
HTML-CSS-JS-入门学习笔记
javascript·css·笔记·学习·html
Mintopia6 小时前
架构进阶 🏗 从 CRUD 升级到“大工程师视野”
前端·javascript·全栈
光影少年6 小时前
vue生态都有哪些?
前端·javascript·vue.js
一只大头猿6 小时前
基于SpringBoot和Vue的超市管理系统
前端·vue.js·spring boot
itslife7 小时前
vite 源码 - 创建 ws 服务
前端·javascript
魔云连洲8 小时前
深入解析:Object.prototype.toString.call() 的工作原理与实战应用
前端·javascript·原型模式
JinSo8 小时前
alien-signals 系列 —— 认识下一代响应式框架
前端·javascript·github