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 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾9 分钟前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉17 分钟前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
乆夨(jiuze)43 分钟前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
小飞悟1 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
code_YuJun1 小时前
Promise 基础使用
前端·javascript·promise
Codebee2 小时前
OneCode自主UI设计体系:架构解析与核心实现
前端·javascript·前端框架
邢同学爱折腾2 小时前
当前端轮播图遇上Electron: 变身一款丝滑的 图片查看器
javascript·electron
xiguolangzi2 小时前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js