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

Vue学习笔记3--全局事件总线

Vue学习笔记3—全局事件总线

1.全局事件总线可以实现任意组件间通信

全局事件总线示意图

X需具备的条件:

  • 所有的组件都要能看见X
  • 可以调用$on $off $emit
  • Vue.prototype.x ={a:1, b:2} 可以被所有组件看见
  • VueComponent.protoype.proto === Vue.prototype
  • 组件实例对象(vc)可以访问到Vue原型上的属性、方法

在这里插入图片描述

2. 安装全局事件总线(main.js)

//创建vm
new Vue({el:'#app',render: h => h(App),beforeCreate() {Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm},
})

3.使用事件总线

  • 接收数据: A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。
methods(){demo(data){......}
}
......
mounted() {this.$bus.$on('hello',this.demo)//绑定自定义事件
},
  • B组件触发自定义事件,并提供数据,
this.$bus.$emit('hello',data)
  • 最好在A组件的beforeDestroy钩子中,用$off去解绑当前组件所用到的事件,已防止$bus负担过重
beforeDestroy(){this.$bus.$off('hello')
}

相关文章:

Vue学习笔记3--全局事件总线

Vue学习笔记3—全局事件总线 1.全局事件总线可以实现任意组件间通信 X需具备的条件: 所有的组件都要能看见X可以调用$on $off $emitVue.prototype.x {a:1, b:2} 可以被所有组件看见VueComponent.protoype.proto Vue.prototype组件实例对象(vc)可以访问到Vue原型上…...

科学和统计分析软件GraphPad Prism mac介绍说明

GraphPad Prism for Mac是一款科学和统计分析软件,旨在帮助研究者、科学家和学生更轻松地处理和可视化数据。 GraphPad Prism for Mac是一款功能强大、易于使用的科学和统计分析软件,适用于各种类型的数据处理和可视化需求。无论您是进行基础研究、临床试…...

[学习笔记]刘知远团队大模型技术与交叉应用L1-NLPBig Model Basics

本节主要介绍NLP和大模型的基础知识。提及了词表示如何从one-hot发展到Word Embedding。语言模型如何从N-gram发展成预训练语言模型PLMs。然后介绍了大模型在NLP任务上的表现,以及它遵循的基本范式。最后介绍了本课程需要用到的编程环境和GPU服务器。 一篇NLP方向的…...

概率论与数理统计————古典概型、几何概型和条件概率

一、古典概型 特点 (1)有限性:试验S的样本空间的有限集合 (2) 等可能性:每个样本点发生的概率是相等的 公式:P(A) A为随机事件的样本点数;S是样本…...

C#编程-使用事件

使用事件 事件是一个动作或发生的事情,例如:鼠标点击、按键、鼠标移动或系统产生的通知。应用程序可以在事件发生的时候做出响应。通知的一个示例是中断。事件是对象发生的消息以表示事件的发生。事件是进程内通信的有效方法。它们对对象时有用的,因为它们标识了单个状态改…...

Dijsktra算法理解笔记

Dijsktra算法理解笔记 学习了柳神的笔记 感谢柳神 Dijkstra算法是处理图问题中的最短路径的问题 最短路径问题可以大致分为两个方向 单源最短路径全局最短路径 以此为基准可以将最短路径算法这样划分: 单源最短路径 Dijkstra :不能求负权边Bellman-F…...

电流检测方法

电路检测电路常用于:高压短路保护、电机控制、DC/DC换流器、系统功耗管理、二次电池的电流管理、蓄电池管理等电流检测等场景。 对于大部分应用,都是通过感测电阻两端的压降测量电流。 一般使用电流通过时的压降为数十mV~数百mV的电阻值&…...

Linux scp命令 服务器之间通讯

目录 一. scp命令简介二. 本地服务器文件传输到远程服务器三. 本地服务器文件夹传输到远程服务器 一. scp命令简介 scp(Secure Copy Protocol)是用于在Unix或Linux系统之间安全地复制文件或目录的命令。 它使用SSH(Secure Shell)…...

C语言中的命名规则(期末版)

一、概述 命名规则是编程语言中的重要组成部分,它决定了变量、函数、常量等标符的命名方式。在C语言中,良好的命名规则可以增加代码的可读性和可维护性,提高程序的质量和开发效率。本文将详细介绍C语言中的命名规则,包括标识符的…...

远程开发之vscode端口转发

远程开发之vscode端口转发 涉及的软件forwarded port 通过端口转发,实现在本地电脑上访问远程服务器上的内网的服务。 涉及的软件 vscode、ssh forwarded port 在ports界面中的port字段,填需要转发的IP:PORT,即可转发远程服务器中的内网端…...

超简单的node爬虫小案例

同前端爬取参数一样,输入三个参数进行爬取 注意点也一样: 注意分页的字段需要在代码里面定制化修改,根据你爬取的接口,他的业务规则改代码中的字段。比如我这里总条数叫total,人家的不一定。返回的数据我这里是data.r…...

(每日持续更新)jdk api之FileFilter基础、应用、实战

博主18年的互联网软件开发经验,从一名程序员小白逐步成为了一名架构师,我想通过平台将经验分享给大家,因此博主每天会在各个大牛网站点赞量超高的博客等寻找该技术栈的资料结合自己的经验,晚上进行用心精简、整理、总结、定稿&…...

基于Matlab/Simulink开发自动驾驶的解决方案

文章目录 处理自动驾驶数据 仿真自动驾驶场景 设计感知算法 设计规划和控制算法 生成代码和部署算法 集成和测试 参考文献 使用 MATLAB/Simulink开发自动驾驶,能够深入建模真实世界的行为、减少车辆测试并验证嵌入式软件的功能,从而推进自动驾驶感…...

gitlab部署

系统版本 [rootlocalhost ~]# cat /etc/redhat-release Red Hat Enterprise Linux release 9.1 (Plow)gitlab包位置 https://mirrors.tuna.tsinghua.edu.cn/gitlab-ee/yum/el9/gitlab-ee-16.7.2-ee.0.el9.x86_64.rpm关闭防火墙 [rootlocalhost data]# systemctl stop firew…...

JVM运行时数据区(下篇)

紧接上篇:JVM运行时数据区(上篇)-CSDN博客 堆 一般Java程序中堆内存是空间最大的一块内存区域。创建出来的对象都存在于堆上。 栈上的局部变量表中,可以存放堆上对象的引用。静态变量也可以存放堆对象的引用,通过静态…...

生成式 AI 描绘复杂科学

生成式AI可以用来描述复杂的科学问题,主要是通过以下两种方式: 数据生成:生成式AI可以通过学习大量数据来生成新的数据,包括科学实验数据。例如,可以使用生成式AI来模拟复杂的物理实验,生成模拟数据&#…...

<蓝桥杯软件赛>零基础备赛20周--第14周--BFS

报名明年4月蓝桥杯软件赛的同学们,如果你是大一零基础,目前懵懂中,不知该怎么办,可以看看本博客系列:备赛20周合集 20周的完整安排请点击:20周计划 每周发1个博客,共20周。 在QQ群上交流答疑&am…...

openEuler安装Docker艰辛路程

文章目录 安装docker测试docker关于windows docker拉取镜像查看所有镜像删除镜像删除不在运行的进程强制删除正在运行的进程 启动docker容器服务-d测试 停止docker容器服务查看docker启动进程更新容器(没有自启动功能,更新为自启动)docker端口映射进入容器修改内容退…...

python图像处理总结

等我有时间了,好好总结一下这几个图像处理包,为后面的研究做个铺垫 skimage包 可以用系统自带的图片,不用自己找图片 from skimage.io import imread, imshow from skimage import data image data.astronaut() imshow(image)后面可以拿这…...

腐烂的橘子 -- DFS、BFS

994. 腐烂的橘子 class OrangesRotting:"""994. 腐烂的橘子https://leetcode.cn/problems/rotting-oranges/description/"""def solution(self, grid: List[List[int]]) -> int:"""BFS时间复杂度 O(M*N)空间复杂度 O(M*N):par…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面,避免重复抓取,以节省资源和时间。 在分布式环境下,增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路:将增量判…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件,我的文件路径是/etc/mysql/my.cnf,有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中,科研绘图是必不可少的,一张好看的图形会是文章很大的加分项。 为了便于使用,本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中,获取方式: R 语言科研绘图模板 --- sciRplothttps://mp.…...

写一个shell脚本,把局域网内,把能ping通的IP和不能ping通的IP分类,并保存到两个文本文件里

写一个shell脚本&#xff0c;把局域网内&#xff0c;把能ping通的IP和不能ping通的IP分类&#xff0c;并保存到两个文本文件里 脚本1 #!/bin/bash #定义变量 ip10.1.1 #循环去ping主机的IP for ((i1;i<10;i)) doping -c1 $ip.$i &>/dev/null[ $? -eq 0 ] &&am…...

深入浅出JavaScript中的ArrayBuffer:二进制数据的“瑞士军刀”

深入浅出JavaScript中的ArrayBuffer&#xff1a;二进制数据的“瑞士军刀” 在JavaScript中&#xff0c;我们经常需要处理文本、数组、对象等数据类型。但当我们需要处理文件上传、图像处理、网络通信等场景时&#xff0c;单纯依赖字符串或数组就显得力不从心了。这时&#xff…...

MyBatis-Plus 常用条件构造方法

1.常用条件方法 方法 说明eq等于 ne不等于 <>gt大于 >ge大于等于 >lt小于 <le小于等于 <betweenBETWEEN 值1 AND 值2notBetweenNOT BETWEEN 值1 AND 值2likeLIKE %值%notLikeNOT LIKE %值%likeLeftLIKE %值likeRightLIKE 值%isNull字段 IS NULLisNotNull字段…...

React、Git、计网、发展趋势等内容——前端面试宝典(字节、小红书和美团)

React React Hook实现架构、.Hook不能在循环嵌套语句中使用 , 为什么&#xff0c;Fiber架构&#xff0c;面试向面试官介绍&#xff0c;详细解释 用户: React Hook实现架构、.Hook不能在循环嵌套语句中使用 , 为什么&#xff0c;Fiber架构&#xff0c;面试向面试官介绍&#x…...

【JavaEE】万字详解HTTP协议

HTTP是什么&#xff1f;-----互联网的“快递小哥” 想象我们正在网上购物&#xff1a;打开淘宝APP&#xff0c;搜索“蓝牙耳机”&#xff0c;点击商品图片&#xff0c;然后下单付款。这一系列操作背后&#xff0c;其实有一个看不见的“快递小哥”在帮我们传递信息&#xff0c;…...

组合模式:构建树形结构的艺术

引言:处理复杂对象结构的挑战 在软件开发中,我们常遇到需要处理部分-整体层次结构的场景: 文件系统中的文件与文件夹GUI中的容器与组件组织结构中的部门与员工菜单系统中的子菜单与菜单项组合模式正是为解决这类问题而生的设计模式。它允许我们将对象组合成树形结构来表示&…...