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])
相关推荐
siaikin2 分钟前
基于 Astro Starlight 的多框架文档
前端·vue.js·markdown
用户40511197831834 分钟前
JSAR 粒子系统实战:打造炫酷 3D 烟花秀
javascript
一树山茶4 分钟前
uniapp云函数使用——内容审核
前端·javascript
西西学代码9 分钟前
Flutter---坐标网格图标
前端·javascript·flutter
Chloe_lll13 分钟前
threejs(五)纹理贴图、顶点UV坐标
javascript·贴图·uv
@PHARAOH28 分钟前
HOW - prefetch 二级页面实践
前端·javascript·react.js
EF@蛐蛐堂30 分钟前
WUJIE VS QIANKUN 微前端框架选型(一)
前端·vue.js·微服务·架构
咚咚咚小柒37 分钟前
【前端】用el-popover做通用悬停气泡(可设置弹框宽度)
前端·javascript·vue.js·elementui·html·scss
JAVA学习通1 小时前
OJ竞赛平台----C端题目列表
java·开发语言·jvm·vue.js·elasticsearch
执剑、天涯2 小时前
通过一个typescript的小游戏,使用单元测试实战(二)
javascript·typescript·单元测试