当前位置: 首页 > 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;的抽烟检测系统可以用于实时检测图像或视频中是否存在抽烟行…...

终极游戏串流指南:如何用Sunshine打造你的个人云游戏服务器

终极游戏串流指南&#xff1a;如何用Sunshine打造你的个人云游戏服务器 【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine 还在为高性能游戏设备的高昂成本而烦恼吗&#xff1f;想要在…...

通过 TaoToken CLI 工具一键配置开发环境中的多工具代理设置

通过 TaoToken CLI 工具一键配置开发环境中的多工具代理设置 1. 安装 TaoToken CLI TaoToken 提供了官方命令行工具 taotoken/taotoken&#xff0c;支持通过 npm 全局安装或直接使用 npx 运行。对于需要频繁配置多个工具的开发环境&#xff0c;建议全局安装&#xff1a; npm…...

除了Stellar,还有哪些Excel文件修复工具值得一试?一份横向评测与选择指南

Excel文件修复工具横向评测&#xff1a;专业选型指南 当一份关键业务报表突然无法打开&#xff0c;或是财务模型显示"不可读内容"错误时&#xff0c;数据恢复工具的选择直接关系到工作效率与数据安全。市场上除了知名度较高的Stellar系列产品&#xff0c;还有多款各具…...

深度解析KKManager:3大架构设计与5个实战应用方案

深度解析KKManager&#xff1a;3大架构设计与5个实战应用方案 【免费下载链接】KKManager Mod, plugin and card manager for games by Illusion that use BepInEx 项目地址: https://gitcode.com/gh_mirrors/kk/KKManager KKManager作为一款专为Illusion系列游戏设计的…...

Python 异常处理 完整学习笔记

&#xff08;从基础、规范写法、常用异常、自定义异常、实操避坑 全整理&#xff0c;适配你的代码习惯&#xff09;一、异常核心基础概念什么是异常代码运行时出现的错误、逻辑非法、参数不合法等&#xff0c;导致程序强制终止的报错&#xff0c;就是异常。主动抛出异常关键字只…...

客服机器人匹配客户语言风格?Agent系统学客户用词语气,沟通更亲切?

在电商客服领域&#xff0c;越来越多的商家发现&#xff1a;同样的问题&#xff0c;不同的客户问法完全不一样。有的客户说话直白干练&#xff0c;有的喜欢用表情包和网络梗&#xff0c;还有的语气温柔细腻。如果客服机器人的回复永远是标准模板式的 “亲爱的&#xff0c;您好”…...

如何快速掌握JetBrains IDE试用期重置工具:面向开发者的完整指南

如何快速掌握JetBrains IDE试用期重置工具&#xff1a;面向开发者的完整指南 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter 你是否曾经因为JetBrains IDE试用期到期而被迫中断开发工作&#xff1f;精心配置的开发…...

【紧急更新】R 4.3.3+LLM Bias Toolkit兼容性漏洞已修复!立即下载patched版本避免训练数据偏见误判

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;R 语言在大语言模型偏见检测中的统计方法 R 语言凭借其强大的统计建模能力与丰富的文本分析生态&#xff08;如 tidytext、quanteda、textdata&#xff09;&#xff0c;已成为评估大语言模型&#xff0…...

2026年腾讯云Hermes Agent/OpenClaw集成步骤+百炼token Plan配置教程攻略

2026年腾讯云Hermes Agent/OpenClaw集成步骤百炼token Plan配置教程攻略。OpenClaw和Hermes Agent是什么&#xff1f;OpenClaw和Hermes Agent怎么部署&#xff1f;如何部署OpenClaw/Hermes Agent&#xff1f;2026年还在为部署OpenClaw和Hermes Agent到处找教程踩坑吗&#xff1…...

如何优化API限流:3种高效处理HTTP 429错误的技术方案

如何优化API限流&#xff1a;3种高效处理HTTP 429错误的技术方案 【免费下载链接】biliTickerBuy b站会员购购票辅助工具 项目地址: https://gitcode.com/GitHub_Trending/bi/biliTickerBuy 在B站会员购抢票辅助工具biliTickerBuy的开发实践中&#xff0c;HTTP 429错误处…...