Uni中使用Vue的EventBus总线机制

最新推荐文章于 2024-05-17 10:59:47 发布
最新推荐文章于 2024-05-17 10:59:47 发布
阅读量2.1k 收藏
点赞数
分类专栏： Vue Uni 小程序 文章标签： Uni EventBus
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38774121/article/details/97617783
版权
Vue 同时被 3 个专栏收录
15 篇文章 1 订阅
订阅专栏
Uni
4 篇文章 0 订阅
订阅专栏
小程序
3 篇文章 0 订阅
订阅专栏

首先我们要使用的EventBus事件总线，能够做到兄弟组件，或者不是父子关系的页面达到数据相互传递的效果

一种做法是在main.js中创建事件总线

在这里插入图片描述
创建完$EventBus后，就可以直接在页面中使用事件总线的方法来发送和接收事件了

第二种做法：封装事件总线

在这里插入图片描述
在这里插入图片描述
使用的时候直接引入就可以了

在这里插入图片描述

磐石BedRock
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp移动端的app的事件总线进行方法的触发EventBus
m0_59638694的博客
05-09 2001
应用场景，A，B两个页面，从A跳到B页面，点击提交按钮，然后再点击手机实体键返回A页面，有一个组件的数据没有更新，原因是onload没有触发，但是又不会写，这时候可以事件总线(eventBus)进行, 注： emit抛出的是什么方法，emit抛出的是什么方法，emit抛出的是什么方法，on就要用什么东西接收 在A页面的提交按钮事件中写上 this.EventBus.EventBus.EventBus.emit(“aMsg”) 抛出 在B页面的 mounted 用 this.EventBus.Ev
uniapp使用 EventBus 进行通讯
weixin_64103049的博客
10-26 2647
uniapp使用 EventBus 进行通讯
uniapp事件总线传参eventbus的用法
最新发布
m0_61476911的博客
05-17 509
uniapp事件总线传参eventbus的用法
在Uni中使用Vue的EventBus总线机制操作
10-15
主要介绍了在Uni中使用Vue的EventBus总线机制操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
uniapp返回上一级页面，并附加参数
xiaobai_longma的博客
05-18 1291
触发全局的自定事件。附加参数都会传给监听器回调。 uni.$emit('update',{msg:'页面更新'}) （放在返回事件的前面） 监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。 uni.$on('update',function(data){ console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg); }) （可以改为箭头函数，不然this无法指向事件） 监听全局的自定
Uniapp事件总线实现路由传递数据
前端卷王小白的博客
04-25 689
uniapp路由,事件总线
详解vue 组件之间使用eventbus传值
01-21
当然，使用存储也是可以得，但是并非一定要缓存，当然在vue中有推荐了我们去使用vuex去数据交互，Vuex会让你的Vue代码足够灵活可控，把数据统一存入state, 只允许通过Actions触发Mutations修改。然而，有时候我们的...
Vue中使用的EventBus有生命周期
12-12
最近遇到了vue项目中的性能问题，整个项目不断的进行操作五分钟左右，页面已经很卡，查看页面占用了1.5G内存，经过排查一部分原因，是自己模块使用的eventBus在离开页面未进行off掉。我们进行下验证： 1、不随生命...
vue篇之事件总线（EventBus）
u011286552的博客
04-22 534
参考文章：https://www.jianshu.com/p/4fa3bf211785 许多现代JavaScript框架和库的核心概念是能够将数据和UI封装在模块化、可重用的组件中。这对于开发人员可以在开发整个应用程序时避免使用编写大量重复的代码。虽然这样做非常有用，但也涉及到组件之间的数据通讯。在Vue中同样有这样的概念存在。通过前面一段时间的学习，Vue组件数据通讯常常会有父子组件，兄弟组件之...
Uni-App知识点
2301_79102435的博客
11-29 896
事件总线可以作为组件沟通的桥梁，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。
关于 uni-app 全局事件总线 $bus 的踩坑
qq_43683753的博客
10-31 1181
关于 uni-app 全局事件总线 $bus 的踩坑
uniapp小程序vue2开发，传值event接收找不到this
weixin_61570458的博客
07-06 273
【代码】uniapp小程序vue2开发，传值event接收找不到this。
vue的eventBus 兄弟传值
fairyfree的博客
07-25 232
eventBus传值，简单方便
uniApp页面通讯
m0_74265396的博客
11-07 606
在 Uniapp 中，可以使用 uni.$emit 和 uni.$on 方法来实现事件总线。uni.$emit：与事件总线类似，uni.$emit 也可以用来实现页面之间的通讯。它也是通过 $emit 和 $on 方法进行绑定和监听的，不过它是全局对象 uni 上的方法，可以在任何页面中调用。Vuex：Vuex 是一种专门为 Vue.js 开发的状态管理库，它可以将需要共享的数据集中存储，以便于在多个组件中共享。以上是一个简单的示例，演示了 Uniapp 中使用事件总线实现页面通讯的方法。
uni-app中使用Vue的EventBus总线机制
qq_25800235的博客
05-25 4549
在main.js中创建事件总线 在页面中注册事件 this.$EventBus.$on('eventName', function(){}); 在页面中调用事件 this.$EventBus.$emit('eventName'); 在页面中移除事件 this.$EventBus.$off('eventName');
uni-app 组件父子之间传值
热门推荐
weixin_42260311的博客
06-27 1万+
父组件 <template> <view> <v-sub @returnDate=returnDate :backGround=backGround></v-sub> </view> </template> <script> import vSub from "../../../components/...
微信小程序（uni-app概述、HBuilderX工具创建、vue-cli脚手架创建、工程配置pages.json、uniapp基础语法、生命周期、组件通信、全局变量）
weixin_48764743的博客
12-01 5221
二、框架概述 1.uni-app概述 Dcloud 地址：DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架 Dcloud是uniapp框架开创者 Dcloud:国内领先的开发者服务公司，W3C会员，HTML5中国产业联盟发起单位。 提供了很多服务开发者的工具，比如 HBuilderX======》开发者工具(微信开发者工具) uniapp======>开
uniapp的使用（基础）
leleshuo
03-10 1451
关于uniapp的创建以及生命周期，以及不同页面之间的通信问题，如何全局挂载方法等
vue eventBus 的使用
07-22
在 Vue 中，你可以使用事件总线（Event Bus）来实现组件之间的通信。事件总线是一个空的 Vue 实例，可以用于触发和监听自定义事件。 首先，在你的项目中创建一个新的 Vue 实例作为事件总线： ```javascript // eventBus.js import Vue from 'vue'; export const eventBus = new Vue(); ``` 然后，在需要通信的组件中，你可以使用事件总线来触发事件或监听事件： ```javascript // ComponentA.vue import { eventBus } from './eventBus.js'; export default { methods: { sendMessage() { eventBus.$emit('message', 'Hello from Component A!'); } } } ``` ```javascript // ComponentB.vue import { eventBus } from './eventBus.js'; export default { data() { return { receivedMessage: '' }; }, mounted() { eventBus.$on('message', (message) => { this.receivedMessage = message; }); } } ``` 在上面的示例中，ComponentA 在方法中通过 `eventBus.$emit` 触发了名为 `message` 的自定义事件，并传递了消息内容。而 ComponentB 在 `mounted` 钩子函数中通过 `eventBus.$on` 监听了 `message` 事件，当事件触发时会执行回调函数并将消息内容赋值给 `receivedMessage`。 这样，ComponentA 和 ComponentB 之间就可以通过事件总线进行通信了。请确保在不需要通信时及时销毁事件监听，以避免内存泄漏。 注意：事件总线在组件之间是全局共享的，可以用于任意组件之间的通信。但是如果你的项目越来越复杂，建议考虑使用更好的状态管理方案，如 Vuex。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值