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])
相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD3 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding3 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空3 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui