Vue全局事件总线 （任意组件之间通信）

最新推荐文章于 2023-07-17 22:51:49 发布
最新推荐文章于 2023-07-17 22:51:49 发布
阅读量464 收藏
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55783373/article/details/119610663
版权
本文介绍了如何在Vue中使用全局事件总线进行任意组件间的通信。首先在main.js中通过Vue原型链创建属性，然后通过$emit发送自定义事件传递学生名字，最后在接收方使用$on监听并接收事件数据。
摘要由CSDN通过智能技术生成

Vue全局事件总线 （任意组件之间通信）

首先在main.js里面 Vue原型链上创建一个属性，把Vue的this赋给他，就能使用vc或者vm身上的属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j5Wq7tZg-1628671154370)(C:\Users\UNIS\AppData\Roaming\Typora\typora-user-images\image-20210811163454261.png)]

把学生的名字传给学校，使用 $emit自定义事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lzifBoD6-1628671154371)(C:\Users\UNIS\AppData\Roaming\Typora\typora-user-images\image-20210811163639333.png)]

学校接收学生传过来的数据，使用 $on接收事件

在这里插入图片描述

沉迷月色831
关注
Vue全局事件总线_任意组件间通信
liaoai的博客
02-24 365
全局事件总线 —— 任意组件间通信 实现一个中介。 1.安装全局事件总线 new Vue({ el:'#app', //将App组件放入容器中 render: h => h(App), beforeCreate(){ Vue.prototype.$bus = this //安装 $bus计算当前应用的vm } }) 2.使用事件总线 ①接收数据：A组件接收数据，则在A组件给$bus绑定自定义事件，事件的回调留在A组件自身 methods(){ demo(data){}
[084-085]_全局事件总线（任意组件间通信）
述安的博客
11-27 260
一种组件间通信的方式，适用于任意组件间通信 安装全局事件总线：在main.js文件中添加生命周期钩子beforeCreate() { Vue.prototype.$bus = this }，$bus就是当前应用的vm 使用事件总线： 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身 methods() { demo(data) {......} } ...... mounted() { this.$bus.$on('demo', this.demo) }.
全局事件总线：任意组件间通信(第一天笔记)
m0_51144154的博客
11-17 273
全局事件总线：任意组件间通信 分析图： 1)线路分析： 比如在A组件中给A组件绑定自定义事件demo,而D组件想给A传递数据，则可以通过触发x身上的demo事件，而demo的回调存在于A中，A就可以被触发。 2)x需要符合的要求： 1.ABCD…所有组件都能看见x 2.可以调用 $on $off $emit 3).对于 2）中 1 条件的实现，x 是需要添加在Vue原型上的，在原型上的组件可以被所有组件vc看到 对于 2）中 2 条件的实现，因为x上要有$on $off $emit，而它们三个又是存在于vm
Vue组件间通信--全局事件总线
linmuqi0928的博客
04-27 123
一种可以在任意组件间通信的方式，本质上就是一个对象，他必须满足以下条件 1.所有的组件对象都必须能看见他 2.这个对象必须能够使用 $on $emit $off 方法去绑定、触发和解绑事件 使用步骤： 安装全局事件总线： new Vue({ ... beforeCreate() { Vue.prototype.$bus = this // 安装全局事件总线，$bus 就是当前应用的 vm }, ... }) 使用事件总线 （1）接收数据：A组件想接收
Vue3笔记_mitt库(事件总线)
热门推荐
qq_41196217的博客
10-11 1万+
mitt库在vue3中的使用 Vue3移除了$on $off等自带的自定义事件相关方法，因此在vue3中他推荐我们下载mitt库来使用事件总线传递数据，其实mitt的使用方式和vue原本的自定义事件使用方式相同，所以我们不必担心学习成本！ 安装mitt库 npm i mitt 使用mitt库 可以在单独的文件暴露出事件总线对象 // mitt库默认导出的是一个函数，我们需要执行它从而得到事件总线的对象 /* eventbus.js */ // 这里我们在js中暴露这个事件总线对象 import mit
Vue全局事件总线-任意组件通信
weixin_60664694的博客
10-30 530
vue,全局事件总线，$bus，任意组件间通信，
学习笔记：任意组件间的通信方式--＞Vue全局事件总线
weixin_58257357的博客
03-22 660
目录 1 ----为什么要用全局事件总线 2 ----配置全局事件总线 3 ----绑定事件 4 ----触发事件 5 ----解除绑定 一 为什么要用全局事件总线？主要是为了方便子组件之间互相传递数据，如图： 从上图我们可以看到App有两个儿子组件A，C一个孙子组件B，要想把B的数据传递给App组件，在不使用总线和订阅的前提下只能通过A作为两者的传递媒介才能完成交互吧，而B和C两组件的数据传递就更麻烦了（兄弟组件间无法互相import，这里不再赘述了）。而如果使用事件总线就简..
Vue2中使用全局事件总线
weixin_44685106的博客
05-01 464
第一步通过一个参数去实现任意组件间通信的一个方法这个参数需要被所有VueComponents看见第一步。
vue的全局事件总线
小认真靖哥哥的博客
11-06 304
vue的全局事件总线
Vue全局事件总线
LuckyStar的博客
07-17 30
【代码】Vue全局事件总线。
vue的全局事件总线传递参数实时更新问题
m0_49072553的博客
11-01 935
场景：father组件 要像 son组件 传递数据（使用全局事件总线） 情况一：son接收的数据只读，修改（更新）在传递数据的组件father中 不进行任何其他操作时（如下），father仅在初始化的时候传递数据给son，后续father更新后son中的数据不会随之更新 father中 data() { return { son:{ name: '宝宝', sex: '女' } } }, mounted() { // thi
Vue 全局事件总线，实现任意组件间通信
乌药ice
09-12 902
1.在main.js中定义全局事件总线$bus Vue.prototype.$bus = this // 安装全局事件总线 $bus new Vue({ el:'#app', render: h => h(App), beforeCreate(){ Vue.prototype.$bus = this // 安装全局事件总线 $bus } }) 2.使用事件总线 （A组件） methods:{ sendS
记录：Vue中的this关键字的作用域
ScholarTang的博客
10-14 2705
问题：在页面加载时使用axios发生aiax请求后端数据，并将数据赋值到vue中的实例中，在赋值的过程中使用this赋值，浏览器没有报错，但是请求到的数据没有赋值到vue实例中的原因 1.比如说我下面这个列子 现有页面main.html，当SpringBoot启动类启动时，我们去访问这个页面，在页面被访问时向后端请求数据，获取到数据赋值到vue的实例中 (采用this) 前段vue代码： &l...
vue任意两个组件的传值（事件总线）
jaykeler的博客
06-27 1825
父子组件之间的传值在某些场景下是比较麻烦的，前几天看到一个新的传值方式，我自己试了一下，感觉还是很方便的，在这里跟大家分享下 第一步，在main.js中挂载方法，代码如下 var bus = new Vue()//新创建一个实例，用以传值 Vue.prototype.bus = bus//挂载在vue的原型上 第二步，在传出值的组件中注册事件，带上需要传的值 <template> <div class="childa"> <button @click="send
JAVA+access综合测评系统毕业设计(源代码+论文+开题报告+任务书).zip
09-12
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
33企业财务风险分析及防范——以永辉超市股份有限公司为例.docx
09-12
33企业财务风险分析及防范——以永辉超市股份有限公司为例
JAVA物业管理系统设计与实现(论文+源代码).zip
最新发布
09-12
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
基于springboot的车辆充电桩管理系统设计与实现.docx
09-12
基于springboot的车辆充电桩管理系统设计与实现.docx
vue2全局事件总线
08-21
在Vue.js中，全局事件总线是一种组件间通信的方式，通过它可以实现任意组件间的通信。在Vue2中，可以通过创建一个Vue实例作为全局事件总线来实现。首先，在创建Vue实例时，我们可以定义一个名为$bus的属性，并将其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值