Vue全局事件总线简明笔记

news2024/11/27 20:34:34

1、作用:

全局事件总线是一种组件间通信的方式,并不是插件,适用于任意组件间通信、实现组件间的通信

让所有的组件都能访问得到全局事件总线,那么创建的思路就是,全局事件总线一定要让VC或者VM访问得到。

结合组件的内置关系:VueComponent.prototype.proto === Vue.prototype
这个关系在作用就在于可以让组件实例对象:vc可以访问到Vue原型上的属性和方法

2、用法:

2.1 安装全局事件总线:

想要实现全局事件总线,就要安装全局事件总线,在main.js中完成全局事件总线的安装配置。
配置如下:

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	// beforeCreate中模板未解析,且this是vm
	beforeCreate(){
		Vue.prototype.$bus = this	//安装全局事件总线
	}
})

2.2 定义事件的绑定

想要接收到数据的组件,进行自定义事件的绑定,简单来说就是,谁要接收数据,自定义事件就绑定在谁身上。

mounted(){
  // 绑定自定义事件
  this.$bus.$on('自定义事件名', (接收参数)=>{
    console.log('我是TestB组件,收到了数据', 接收参数);
  })
}

2.3 全局事件总线的触发

事件的触发是在发送数据的组件中完成的,简单来说,谁是数据的发送者,谁就来触发事件

 methods:{
  // 触发事件,事件名不能重复
  触发事件方法名(){
    this.$bus.$emit('自定义事件名', 传递参数);
  }
},

2.4 解绑事件,提高性能

// 销毁对应自定义事件
beforeDestroy(){
  this.$bus.$off('自定义事件名')
}

3、注意事项:

全局事件总线之所以叫全局,是因为任何组件都可以访问,这就导致如果大量组件都绑定了全局事件总线,难免会造成代码混乱,且自定义事件名可能发生重复的问题,所以在开发中,使用全局事件总线时要根据实际业务情况进行选择.

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/626943.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

leetcode24. 两两交换链表中的节点(java)

两两交换链表中的节点 leetcode24. 两两交换链表中的节点題目描述 迭代法.解题思路代码演示 递归法解题思路代码演示 二叉树专题 leetcode24. 两两交换链表中的节点 来源:力扣(LeetCode) 链接:https://leetcode.cn/problems/swap-…

全志V3S嵌入式驱动开发(看门狗驱动)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 大家如果做过工业级别的嵌入式设备,那么对看门狗应该不陌生。很多工业级的设备,其应用环境很多时候是非常糟糕的&#xff0…

抖音seo矩阵系统源码开发及部署配置文档分享

一、开发要求及实现流程 :Scope: video.create 需要申请权限 需要用户授权 该接口用于上传视频文件到文件服务器,获取视频文件video_id(该 ID 为加密后的 ID)。该接口适用于抖音。 注意: 抖音的OAuth API以https://…

阿里云弹性公网ip(EIP)是什么?eip详细介绍

阿里云eip是什么?阿里云百科分享弹性公网IP详细介绍,阿里云弹性公网EIP是什么意思?EIP是可以独立持有的公网IP地址,EIP可以和阿里云专有网络VPC类型的云服务器ECS、NAT网关、ENI网卡、私网负载均衡SLB等绑定,通过EIP可…

chatgpt赋能python:Python是什么

Python是什么 Python是一门高级编程语言,由Guido van Rossum于1991年发明并开发。它具有简单易学、可读性强、跨平台等特点,在Web开发、数据分析、机器学习等领域广泛应用。 Python的文档 Python的文档非常全面,包括官方文档、第三方文档、…

SimSwap复现指引及代码分析【2023有更新】

SimSwap复现指引及代码分析【2023有更新】 0、前言1、复现指引环境配置指引Inference for image or video face swappingInference参数解析Inference用法示例图像视频 2、结果分析3、代码分析 0、前言 论文讲解在:https://blog.csdn.net/qq_45934285/article/detail…

33、js - 事件循环 微任务 宏任务

1、事件循环♻️(EventLoop) js是单线程语言,也就是某一刻只能执行一行代码,为了让耗时代码不阻塞其他代码运行,设计了事件循环模型。 事件循环是一个并发模型,负责执行代码、收集异步任务的模型&#xff0…

容器(第四篇)创建镜像-dockerfile

创建镜像有三种方法,分别为基于已有镜像创建、基于本地模板创建以及基于Dockerfile创建。 基于现有镜像创建: ①先使用现有镜像创建容器 docker run ②再进入容器进行内容更新 docker exec ③最后提交成新的镜像 docker commit 或 docker…

Linux远程管理工具(PuTTY和SecureCRT)

通过《Linux远程管理协议》一节可以知道,Linux远程管理服务器多基于 SSH 协议。本节给大家介绍 2 种常见的基于 SSH 协议的远程管理工具,分别是 PuTTY 和 SecureCRT。 在使用远程管理工具之前,应先设置宿主机 Windows 与虚拟机 Linux 能够连…

mysql 联合查询

mysql联合查询 联合查询:union,将多次查询(多条select语句)的结果,在字段数相同的情况下,在记录的层次上进行拼接。 基本语法 联合查询由多条select语句构成,每条select语句获取的字段数相同,但与字段类…

Seata介绍、原理、配置

目录 介绍: 核心组件: 原理: Seata 会有 4 种分布式事务解决方案,分别是 AT 模式、TCC 模式、Saga 模式和 XA 模式 AT模式原理: 一阶段: 二阶段提交: 二阶段回滚: Seata配置…

【轨迹跟踪】基于自适应跟踪(EAT)方法的无人机/移动机器人轨迹跟踪(MatlabSimulink)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

随着信息技术的快速发展,编程已经成为一个越来越重要的技能。那么,我们该如何入门编程呢?

*随着信息技术的快速发展,编程已经成为一个越来越重要的技能。那么,我们该如何入门编程呢? 一、自学编程需要注意什么? 自学编程需要注意以下几点: 设定清晰的学习目标:在开始学习编程前,你需…

chatgpt赋能python:Python在485读电表方面的应用

Python在485读电表方面的应用 介绍 近年来,随着智能电网和智慧城市的不断发展,越来越多的城市和企事业单位开始关注能源消费情况并采取有效管理手段,实现节能减排。而想要实现对能源消费情况的监测和控制,就需要能够对电表进行读…

Docker数据管理和网络通信

Docker 的数据管理 管理 Docker 容器中数据主要有两种方式:数据卷(Data Volumes)和数据卷容器(DataVolumes Containers)。 1.数据卷 数据卷是一个供容器使用的特殊目录,位于容器中。可将宿主机…

MQTT协议基本讲解(结合netty)

正文 前提MQTT结构可变报文头(Variable Header)有效负荷(payload)固定报文头(Fixed Header)消息类型(Message Type)QoS级别标志(0,1,2&#xff09…

Spring Cloud OpenFeign源码解析,代理的魅力一展无遗

文章目录 一、OpenFeign简介二、OpenFeign中Bean的动态装载1、EnableFeignClients2、registerFeignClients3、FeignClientFactoryBean.getObject4、loadBalance5、DefaultTarget.target6、ReflectiveFeign.newInstance生成代理(1)targetToHandlersByName…

C语言字符及字符串讲解

文章目录 前言一、字符介绍和使用二、字符串介绍和使用三、字符串操作函数四、字符串的长度和字符串所占内存空间的大小总结 前言 C 语言中的字符和字符串是常用的数据类型。字符是一个单个的字母、数字、标点符号或者其他可打印的符号,使用单引号 ’ ’ 表示&…

Linux route命令实战:route 命令实战教程,配置静态路由,删除路由表项

前言 大家好,又见面了,我是沐风晓月,本文是专栏【linux基本功-基础命令实战】的第61篇文章。 专栏地址:[linux基本功-基础命令专栏] , 此专栏是沐风晓月对Linux常用命令的汇总,希望能够加深自己的印象&am…

使用大型语言模(LLM)构建系统(四):链式提示

今天我学习了DeepLearning.AI的 Building Systems with LLM 的在线课程,我想和大家一起分享一下该门课程的一些主要内容。 下面是我们访问大型语言模(LLM)的主要代码: import openai#您的openai的api key openai.api_key YOUR-OPENAI-API-KEY def get_…