uniapp移动端的app的事件总线进行方法的触发EventBus

最新推荐文章于 2024-06-21 16:27:06 发布
最新推荐文章于 2024-06-21 16:27:06 发布
阅读量2k 收藏 2
点赞数
分类专栏： uniapp 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59638694/article/details/124662359
版权
本文介绍了在uniapp中如何利用事件总线(EventBus)解决A到B页面回退时组件数据未更新的问题。当A页面的提交按钮触发`this.EventBus.emit('aMsg')`，B页面在`mounted`阶段通过`this.EventBus.on('aMsg', (msg) => { this.handleReload() })`监听并调用`handleReload()`方法，从而在返回A页面时重新加载数据。" 137385043,22837968,ESP8266作为TCP Server与远程控制,"['嵌入式', 'ESP8266', 'TCP/IP', '无线通信', '物联网']
摘要由CSDN通过智能技术生成

应用场景，A，B两个页面，从A跳到B页面，点击提交按钮，然后再点击手机实体键返回A页面，有一个组件的数据没有更新，原因是onload没有触发，但是又不会写，这时候可以事件总线(eventBus)进行,
注：
e m i t 抛 出 的 是 什 么 方 法 ， emit抛出的是什么方法， emi

最低0.47元/天 解锁文章
米法老婆塞尔达
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
在Uni中使用Vue的EventBus总线机制操作
10-15
主要介绍了在Uni中使用Vue的EventBus总线机制操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
uni-app中使用Vue的EventBus总线机制
qq_25800235的博客
05-25 4582
在main.js中创建事件总线 在页面中注册事件 this.$EventBus.$on('eventName', function(){}); 在页面中调用事件 this.$EventBus.$emit('eventName'); 在页面中移除事件 this.$EventBus.$off('eventName');
uni-app 非父子组件之间的传参 推荐（bus传值）
最新发布
m0_62058782的博客
06-21 237
key，可以把第三步写到mounted钩子函数中。console.log("recommen孝敬的",e)})
uniapp使用 EventBus 进行通讯
weixin_64103049的博客
10-26 2713
uniapp使用 EventBus 进行通讯
uniApp页面通讯
m0_74265396的博客
11-07 649
在 Uniapp 中，可以使用 uni.$emit 和 uni.$on 方法来实现事件总线。uni.$emit：与事件总线类似，uni.$emit 也可以用来实现页面之间的通讯。它也是通过 $emit 和 $on 方法进行绑定和监听的，不过它是全局对象 uni 上的方法，可以在任何页面中调用。Vuex：Vuex 是一种专门为 Vue.js 开发的状态管理库，它可以将需要共享的数据集中存储，以便于在多个组件中共享。以上是一个简单的示例，演示了 Uniapp 中使用事件总线实现页面通讯的方法。
uniapp事件总线传参eventbus的用法
m0_61476911的博客
05-17 696
uniapp事件总线传参eventbus的用法
uniapp中页面之间通信
qq_39695210的博客
03-20 1002
uniapp中页面之间通信
Node.js-EasyEventBus一个轻量级的事件总线库
08-12
2. **发布者（Publisher）**：发布者是触发事件的组件，它通过调用事件总线的`emit`方法来发布事件。 3. **订阅者（Subscriber）**：订阅者是对特定事件感兴趣的组件，它通过注册监听器来接收并处理事件。 4. **监听...
浅谈angular2子组件的事件传递(任意组件事件传递)
12-03
在需要触发事件的组件中，同样注入EventBusService并使用`emit`方法发送事件： ```typescript import { Component } from '@angular/core'; import { EventBusService } from './event-bus.service'; @Component({...
Android应用源码之EventBus--IT计算机-毕业设计.zip
04-06
- **发布（Posting）**：发送事件的过程，通过 EventBus 的 `post()` 方法将事件对象发送出去。 - **订阅（Subscribing）**：注册接收事件的方法，使用 `@Subscribe` 注解标记方法，并指定事件的线程模式。 - **...
EventBus3Demo
07-14
事件对象可以是任何类型的实例，EventBus会找到所有订阅了该事件类型的订阅者并触发它们的订阅方法。 4. **订阅事件（Subscribing Events）**： 要订阅事件，需要创建一个方法并用`@Subscribe`注解，该方法的参数...
vue 中几种传值方法(3种)
10-16
EventBus是利用一个空的Vue实例作为中央事件总线（bus），来实现组件间的消息发布和订阅。使用EventBus时，一个组件通过$emit方法发出一个事件，另一个组件通过$on方法监听这个事件。这样，组件之间就实现了解耦的...
$eventBus 的使用、问题
Zhuang_weixin的博客
08-23 339
所以，如果想要用 bus 来进行页面组件之间的数据传递，需要注意两点：一、组件A emit 事件应在beforeDestory生命周期内。二、组件B内的 on 记得要销毁。
uniapp页面通信方法总汇
油墨香^-^的博客
02-22 1042
uni-app 是一个使用 vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。A页面向B页面传递参数B页面接收A页面传递的参数自 HBuilderX 2.0.0 起支持 uni.$emit、 uni.$on 、 uni.$once 、uni.$off ，可以方便的进行页面的通讯 ，触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等。
uniapp返回上一级页面，并附加参数
xiaobai_longma的博客
05-18 1314
触发全局的自定事件。附加参数都会传给监听器回调。 uni.$emit('update',{msg:'页面更新'}) （放在返回事件的前面） 监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。 uni.$on('update',function(data){ console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg); }) （可以改为箭头函数，不然this无法指向事件） 监听全局的自定
vue3中的event bus
杜永康的博客
06-10 8349
event Bus在vue3中事实上已经被删除了，因为官方说它可能会导致一些潜在的问题。如，在大型项目中使用 Event Bus 可能会变得难以维护和调试，同时也可能会影响应用程序的性能。此外，在 Vue 3.x 中已经有更多先进和强大的工具来进行组件之间通信，例如 provide/inject 和 Emit/Listeners 等机制。因此，Vue 3.x 团队决定删除 Event Bus，以鼓励开发者使用更好的解决方案。但是还有很多项目是相对较小的，依然是可以使用的。
vuex手册（入门细解）
孛儿只斤·苏日娜的日记
07-06 625
vuex的使用 1、概念 Vuex是适用于在Vue项目开发时使用的状态管理工具。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 2、Vuex 和单纯的全局对象的不同点 1、Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。 2、不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。 3、适用
uni-app之兄弟组件之间的通讯（事件总线）
qq_57039857的博客
10-27 589
uni-app之兄弟组件之间的通讯（事件总线）
关于uniapp的app和uniapp的H5互相通讯实现H5调取app扫码再传入H5(app内嵌H5,webView)
wangyujia12的博客
09-13 1977
/此处需要注意的是如果项目本身要打包成app,记得使用条件编译，否则在app运行时本次引入会报错。在“一“的app接收h5传值部分我也写了。1，在h5项目的mian.js中引入。二.扫码过后app向h5传值并跳转。2.h5页面给app传值部分。2.h5接收app传过来的值。一.h5传值给app。js由于我做的是扫码。
uniapp怎么实现App双向监听，当我触发事件，另一方面可以收到我触发的事件
07-14
在uni-app中，您可以通过全局事件总线或者Vuex来实现App双向监听，当您触发事件时，另一方面可以收到您触发的事件。 1. 使用全局事件总线： 在main.js文件中创建一个全局的Vue实例，并使用它作为事件总线： ```javascript // main.js import Vue from 'vue' Vue.prototype.$eventBus = new Vue() ``` 在需要发送事件的组件中，使用`$emit`方法触发自定义事件，并将需要传递的数据作为参数传递： ```javascript // ComponentA.vue export default { methods: { triggerEvent() { this.$eventBus.$emit('myEvent', 'Hello from Component A') } } } ``` 在需要接收事件的组件中，使用`$on`方法监听自定义事件，并定义一个回调函数处理接收到的事件： ```javascript // ComponentB.vue export default { created() { this.$eventBus.$on('myEvent', this.handleEvent) }, destroyed() { this.$eventBus.$off('myEvent', this.handleEvent) }, methods: { handleEvent(data) { console.log(data) // 输出 'Hello from Component A' } } } ``` 通过全局事件总线，Component B可以监听并接收到Component A触发的事件。 2. 使用Vuex： 在store中定义一个状态，用于存储需要共享的数据： ```javascript // store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { eventData: '' }, mutations: { setEventData(state, data) { state.eventData = data } }, actions: { triggerEvent(context, data) { context.commit('setEventData', data) } } }) export default store ``` 在需要发送事件的组件中，通过dispatch方法触发一个action： ```javascript // ComponentA.vue export default { methods: { triggerEvent() { this.$store.dispatch('triggerEvent', 'Hello from Component A') } } } ``` 在需要接收事件的组件中，通过mapState将store中的eventData映射到组件的计算属性中，实时监听数据的变化： ```javascript // ComponentB.vue import { mapState } from 'vuex' export default { computed: { ...mapState(['eventData']) }, watch: { eventData(newValue) { console.log(newValue) // 输出 'Hello from Component A' } } } ``` 通过Vuex，Component B可以实时监听并接收到Component A触发的事件。 以上是在uni-app中实现App双向监听的两种方式，您可以根据自己的需求选择其中一种来实现。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值