当前位置: 首页 > 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])

相关文章:

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(para…...

基于 Modbus 的工业数据采集、控制(part 2)

基本处理流程 服务器 parse_and_process(char * input)//input :post请求发送的正文 {...// 请求 modbus 数据else if(strstr(input, "modbus_get")){return handle_get(sock, input);}// 控制 modbus 设备else if(strstr(input, "modbus_set")){return …...

vue前端项目如何配置后端项目的请求地址

在 Vue 前端项目中配置后端项目的访问地址可以通过修改项目的配置文件来实现。Vue 常用的配置文件是 vue.config.js,你可以按照以下步骤进行配置: 在 Vue 项目的根目录下,创建或编辑 vue.config.js 文件。 在 vue.config.js 中,可…...

Lora学习资料汇总

目录 LoRa联盟 Semtech lora网关供应商: LoRaMAC API文档 论坛 开发板 主流技术对比分析 LoRa网络距离模拟测试方法 LoRa应用 LoRa联盟 LoRa联盟:LoRaWAN规范的制定组织 https://www.lora-alliance.org/ LoRa技术白皮书:https://www.lora-alli…...

Oracle的控制文件多路复用,控制文件备份,控制文件手工恢复

一.配置控制文件多路复用 1.查询Oracle的控制文件所在位置 SQL> select name from v$controlfile;NAME -------------------------------------------------------------------------------- /u01/app/oracle/oradata/orcl/control01.ctl /u01/app/oracle/fast_recovery_a…...

在线视频课程教育系统源码/网课网校/知识付费/在线教育系统/在线课程培训系统源码

源码简介: 在线视频课程教育系统源码,作为网课/网校/知识付费/在线教育系统,它有文章付费阅读在线点播自动发货付费阅读VIP会员系统等功能。它是实用的在线课程培训系统源码。 发货100-在线视频课程教育系统,它是一款功能实用的…...

程序员护城河:保障系统安全与网络稳定的不可或缺力量

引言: 在当今数字化时代,计算机和互联网的广泛应用使得程序员的角色变得越来越重要。作为保障系统安全与网络稳定的关键力量,程序员需要具备一系列的基本能力,同时还需掌握一些专业技术和策略,以确保系统运行的安全性…...

html属性值可以不用引号吗,实例验证

html属性值可以不用引号 HTML元素的属性值可以不适用引号来包裹,浏览器一样可以将其进行渲染。不过,如果这样写HTML的代码的话,属性与属性值之间需要用空格来进行隔开,避免后面的属性变成前面属性的属性值。 提示:虽…...

angular 实现模块共享

angular 实现共享模块 新建共享模块: ng g m material material.module.ts import {NgModule } from @angular/core; import {OverlayModule } from @angular/cdk/overlay; import {CdkTreeModule } f...

带记忆的超级GPT智能体,能做饭、煮咖啡、整理家务!

随着AI技术的快速迭代,Alexa、Siri、小度、天猫精灵等语音助手得到了广泛应用。但在自然语言理解和完成复杂任务方面仍然有限。 相比文本的标准格式,语音充满复杂性和多样性(例如,地方话),传统方法很难适应不同用户的…...

易点易动设备管理系统提升设备能耗管理和设备状态监控效率

如今,能源效率和设备状态监控对于企业来说变得越发重要。传统的设备管理方式往往存在能耗浪费和难以实时监控设备状态的问题。为了解决这些问题,易点易动设备管理系统应运而生。本文将介绍易点易动设备管理系统的功能和优势,以及如何通过它提…...

【idea】解决idea 执行maven build总下载 Downloading maven-metadata.xml文件

可以看到如下日志中打印了执行的命令行,其中包含 --update-snapshots,是强制更新的意思。 日志内容如下: D:\env\jdk1.8.0_261\bin\java.exe --update-snapshots -s D:\env\apache-maven-3.8.6\conf\settings.xml -Dmaven.repo.localD:\env\…...

HttpClient发送MultipartFile多文件及多参数请求

1、环境准备&#xff1a; <dependency><groupId>commons-httpclient</groupId><artifactId>commons-httpclient</artifactId><version>3.1</version></dependency><dependency><groupId>org.apache.httpcomponent…...

TMUX设置鼠标滚轮滑动来浏览之前的前面内容

在Ubuntu上使用Tmux有时使用鼠标滚轮时&#xff0c;和平时使用终端的习惯不怎么一致&#xff0c;因此可以设置启用鼠标滚轮。 通过鼠标滚轮滑动来浏览之前的前面内容 具体方式&#xff1a; 1 按完前缀ctrlB后 2 再按冒号&#xff1a;(记得shift) 3 进入命令行模式(下方绿色栏变…...

「go查漏补缺」命名规则以及 GROM 结构体的应用

概述&#xff1a; 在学习GORM过程中&#xff0c;总是在调用结构体和文件导入这里出错&#xff0c;所以整理了以下文档用于梳理变量/结构体命名规则和import导入的知识点 一、变量/结构体命名规则 变量/结构体都遵守同样的命名规则&#xff1a;可见性由首字母大小写决定 大写…...

Django 集成 Celery 实现高效的异步任务处理

概要 在复杂的 Web 应用中&#xff0c;处理长时间运行的任务或定期任务是一项挑战。Django 作为一个强大的 Python Web 框架&#xff0c;可以通过集成 Celery 这一异步任务队列来优化这些任务的处理。Celery 不仅能提高应用性能&#xff0c;还能改善用户体验。本文将深入探讨如…...

Java之异常(上):基本异常体系

一、背景引入&#xff1a; Java中的异常是指&#xff1a;Java程序在运行时可能出现的错误或非正常情况。例如&#xff1a;在程序中试图打开一个根本不存在的文件&#xff0c;在程序中除0等。异常是否出现&#xff1a;通常取决于程序的输入、程序中对象的当前状态以及程序所处的…...

你的关联申请已发起,请等待企业微信的管理员确认你的申请

微信支付对接时&#xff0c;需要申请AppID,具体在下面的位置&#xff1a; 关联AppID&#xff0c;发起申请时&#xff0c;会提示这么一句话&#xff1a; 此时需要登录企业微信网页版&#xff0c;使用注册人的企业微信扫码登录进去&#xff0c;然后按照下面的步骤操作即可。 点击…...

.nvmrc 文件使用详解

文章目录 1. 前言2. .nvmrc 是什么3. 创建 .nvmrc 文件4. 使用 .nvmrc 文件5. 终端自动切换版本 1. 前言 当开发多个项目时&#xff0c;每个项目运行环境要求的 node 版本不一样&#xff0c;那么我们就需要给每个项目指定 node 版本&#xff0c;也就是通过终端执行 nvm install…...

深度学习之基于YoloV5抽烟检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 基于YOLOv5&#xff08;You Only Look Once&#xff09;的抽烟检测系统可以用于实时检测图像或视频中是否存在抽烟行…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

怎么让Comfyui导出的图像不包含工作流信息,

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

MySQL体系架构解析(三):MySQL目录与启动配置全解析

MySQL中的目录和文件 bin目录 在 MySQL 的安装目录下有一个特别重要的 bin 目录&#xff0c;这个目录下存放着许多可执行文件。与其他系统的可执行文件类似&#xff0c;这些可执行文件都是与服务器和客户端程序相关的。 启动MySQL服务器程序 在 UNIX 系统中&#xff0c;用…...

Yii2项目自动向GitLab上报Bug

Yii2 项目自动上报Bug 原理 yii2在程序报错时, 会执行指定action, 通过重写ErrorAction, 实现Bug自动提交至GitLab的issue 步骤 配置SiteController中的actions方法 public function actions(){return [error > [class > app\helpers\web\ErrorAction,],];}重写Error…...