当前位置: 首页 > news >正文

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 是空数组,接收到的会是 undefinedbroadcast.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])
http://www.lryc.cn/news/240022.html

相关文章:

  • 基于 Modbus 的工业数据采集、控制(part 2)
  • vue前端项目如何配置后端项目的请求地址
  • Lora学习资料汇总
  • Oracle的控制文件多路复用,控制文件备份,控制文件手工恢复
  • 在线视频课程教育系统源码/网课网校/知识付费/在线教育系统/在线课程培训系统源码
  • 程序员护城河:保障系统安全与网络稳定的不可或缺力量
  • html属性值可以不用引号吗,实例验证
  • angular 实现模块共享
  • 带记忆的超级GPT智能体,能做饭、煮咖啡、整理家务!
  • 易点易动设备管理系统提升设备能耗管理和设备状态监控效率
  • 【idea】解决idea 执行maven build总下载 Downloading maven-metadata.xml文件
  • HttpClient发送MultipartFile多文件及多参数请求
  • TMUX设置鼠标滚轮滑动来浏览之前的前面内容
  • 「go查漏补缺」命名规则以及 GROM 结构体的应用
  • Django 集成 Celery 实现高效的异步任务处理
  • Java之异常(上):基本异常体系
  • 你的关联申请已发起,请等待企业微信的管理员确认你的申请
  • .nvmrc 文件使用详解
  • 深度学习之基于YoloV5抽烟检测系统
  • 解释器模式 (Interpreter Pattern)
  • 【bug】uniapp的image组件渲染gif图,只有第一次点击的时候有动效,需要每次点击都有gif效果,已解决
  • ubuntu编译sqlite3并使用
  • 【OpenCV+OCR】计算机视觉:识别图像验证码中指定颜色文字
  • 【ROS 2 进阶-MoveIt!】MoveIt!中的关键节点
  • -bash: jps: command not found
  • [CLickhouse] 学习小计
  • 一款非常优秀的项目管理工具:进度猫(推荐)
  • Bert学习笔记(简单入门版)
  • 信号功率放大器的工作原理和特点是什么
  • 基于go标准分层架构项目设计实现