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

八大网盘直链下载助手:告别限速困扰,一键获取真实下载链接的终极指南

八大网盘直链下载助手&#xff1a;告别限速困扰&#xff0c;一键获取真实下载链接的终极指南 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云…...

字节一面突施冷箭:大模型输出不做结构化会怎样?我憋出一句“不好看”,面试官咳嗽不止。。。

。 前段时间有个录友来找我复盘&#xff0c;他面了字节的大模型应用岗&#xff0c;简历项目里做了一套信息提取与入库系统。 他的系统在模型调用上做得相当不错 —— 选了该领域能力最强的模型&#xff0c;上下文给得够全&#xff0c;提取内容也基本准确。但面试官偏偏不问模…...

别再只会用BLDC方波驱动了!深入浅出对比FOC与六步换相的噪音、效率与适用场景

无刷电机控制技术进阶&#xff1a;FOC与六步换相的深度对比与选型指南 在消费电子和工业设备领域&#xff0c;无刷直流电机(BLDC)凭借高效率、长寿命和低维护成本等优势&#xff0c;正逐步取代传统有刷电机。然而&#xff0c;面对不同的应用场景&#xff0c;工程师们常常陷入控…...

别再手动写动画了!Vue 3 + Lottie 实现炫酷交互动画(附免费资源站)

Vue 3与Lottie动画&#xff1a;高效开发者的视觉魔法工具箱 在当今快节奏的前端开发领域&#xff0c;视觉动效已成为提升用户体验的关键因素。然而&#xff0c;传统的手写CSS或JavaScript动画不仅耗时耗力&#xff0c;还常常面临浏览器兼容性和性能优化的挑战。这就是为什么越…...

Mac Mouse Fix:让普通鼠标在macOS上获得触控板般的神奇体验

Mac Mouse Fix&#xff1a;让普通鼠标在macOS上获得触控板般的神奇体验 【免费下载链接】mac-mouse-fix Mac Mouse Fix - Make Your $10 Mouse Better Than an Apple Trackpad! 项目地址: https://gitcode.com/GitHub_Trending/ma/mac-mouse-fix 还在为macOS上鼠标滚轮滚…...

短剧出海翻译避坑指南:我们踩过的5个坑和对应的解法

做短剧出海翻译这件事&#xff0c;坑比想象中多。不是翻译本身有多难&#xff0c;而是整个流程里有太多细节会在你不注意的时候悄悄出问题——OCR识别出了错你不知道&#xff0c;专有名词翻偏了你没发现&#xff0c;100集批量处理卡在中间你不知道从哪里排查&#xff0c;字幕压…...

用STC89C52和DS1302芯片DIY一个桌面电子万年历(附Proteus仿真和完整代码)

从零打造桌面电子万年历&#xff1a;STC89C52与DS1302实战指南 1. 项目概述与核心组件解析 在创客圈子里&#xff0c;自制电子万年历一直是个经典项目。不同于市面上千篇一律的成品&#xff0c;自己动手打造的电子钟不仅能满足个性化需求&#xff0c;更能深入理解实时时钟(RT…...

LinkSwift网盘直链助手:2025年八大网盘高速下载终极指南

LinkSwift网盘直链助手&#xff1a;2025年八大网盘高速下载终极指南 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天…...

别再自己写客服系统了!我用Amazon Connect 30分钟搭了个智能客服,还集成了AI

别再自己写客服系统了&#xff01;我用Amazon Connect 30分钟搭了个智能客服&#xff0c;还集成了AI 去年我们团队用户量突破50万时&#xff0c;客服工单突然暴涨300%。当时自研的工单系统根本扛不住压力&#xff0c;排队等待时间经常超过2小时。更糟的是&#xff0c;团队里3个…...

swoole不能使用VUE?

Swoole 和 Vue 不仅可以一起使用&#xff0c;而且是现代 PHP 全栈开发的“黄金搭档”。** 这个误区的根源在于混淆了 后端运行时 (Backend Runtime) 和 前端框架 (Frontend Framework) 的边界&#xff0c;以及混淆了 传统 PHP 渲染模式 与 前后端分离模式。 如果把 Web 应用比作…...