uniapp使用页面通讯$on、$emit进行数据传参，页面DOM不刷新问题

　康　

已于 2024-04-10 17:31:08 修改

阅读量718

点赞数 1

分类专栏： uniapp 微信小程序 vue 文章标签： uni-app 前端 javascript

于 2023-11-17 12:11:11 首次发布

本文链接：https://blog.csdn.net/qq_40047019/article/details/134460127

版权

uniapp 同时被 3 个专栏收录

38 篇文章 5 订阅

订阅专栏

微信小程序

33 篇文章 2 订阅

订阅专栏

vue

29 篇文章 3 订阅

订阅专栏

本文介绍了在uni-app应用中，如何在A页面通过setTimeout延迟调用$emit方法传递数据到B页面，并在B页面的onLoad和onUnload生命周期钩子中监听和移除updateAddress事件的处理。

摘要由CSDN通过智能技术生成

A页面传递

setTimeout(() => {
	uni.$emit('updateAddress', addressInfo);
}, 500);
uni.navigateBack({
	delta: 1
})

B页面接收

onLoad(option) {
    var _this = this;
    // 获取选择的地址
	uni.$on('updateAddress', function(data) {
		// console.log(data);
	})
},
onUnload(option) {
    // 移除监听事件
	uni.$off('updateAddress');
},

核心是在A页面传递之前，加个延迟。

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

　康　

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
uniapp使用页面通讯$on、$emit进行数据传参，页面DOM不刷新问题

核心是在A页面传递之前，加个延迟。
复制链接

扫一扫

专栏目录

uniapp 使用 $emit和$on——$on中无法为data中的变量赋值

weixin_48596030的博客

12-05

1257

问题在于this的指向，解决办法是使用变量保存$on，其次再为data中的值赋值。

解决vue bus.$emit触发第一次$on监听不到问题

10-15

主要介绍了解决vue bus.$emit触发第一次$on监听不到问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

1 条评论您还未登录，请先登录后发表或查看评论

UniApp中$on、$emit，数据更新页面内容不更新

qq_39084174的博客

04-30

938

UniApp中$on、$emit，数据更新页面内容不更新

uni-app——uniapp 子组件 $emit 传单个或多个参数

热门推荐

一起来讨论学习前端技术吧

09-05

2万+

[uniapp] 跨页面传值 uni.$emit 和 uni.$on 的使用方法以及遇到的坑

uniapp中使用uni.$emit和uni.$on进行页面通讯传值

hu104160112的博客

06-02

1万+

注意事项 1.uni.emit、uni.emit、 uni.emit、uni.on 、 uni.once、uni.once 、uni.once、uni.off 触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等 2.使用时，注意及时销毁事件监听，比如，页面 onLoad 里边 uni.on注册监听，onUnload里边uni.on 注册监听，onUnload 里边 uni.on注册监听，onUnload里边uni.off 移除，或者一次性的事件，直接使用 uni.$once 监听 A

精通UniApp页面间通信：uni.$once和uni.$emit的神奇应用技巧

nbsaas-boot基于Request-Response的企业级快速开发框架

04-22

1730

UniApp作为一款多端开发框架，其页面间的通信对于构建丰富交互体验至关重要。本文将探讨UniApp中使用uni.$on和uni.$emit实现页面间通信的技巧，并展示两个精彩例子，帮助你更好地理解和应用这些技术。

『uni-app』事件传值『this.$emit』『uni.$emit』

ReturnTmp的博客

09-16

4834

只要在想要传值的页面onload方法中注册订阅事件,在需要传值的页面传值就可以收到回调。与之相对的当父组件需要调用子组件时则使用this.$refs的方法。用于当子组件需要调用父组件的方法的场景下使用。格式：this.$emit('事件',参数)uni.$emit 这个是全局的事件订阅。my-search.vue组件。触发全局订阅事件的方法。

vue中$refs, $emit, $on, $once, $off的使用详解

10-16

在Vue.js框架中，$refs, $emit, $on, $once, 和 $off 是用于组件间通信的重要机制。下面将分别对它们进行详细的解释和示例说明。 1. **$refs** `$refs` 是 Vue 提供的一种机制，允许父组件引用其子组件实例。在...

vuejs使用$emit和$on进行组件之间的传值的示例

11-26

这两个方法主要用于子组件向父组件传递信息，因为 Vue 默认不支持子组件向父组件直接传递值，而 `$emit` 和 `$on` 的组合恰好解决了这个问题。在 Vue 中，`$emit` 是子组件用于触发自定义事件的方法，通常伴随着...

解决Vue.js父组件$on无法监听子组件$emit触发事件的问题

10-18

通常情况下，当父组件需要监听子组件发出的事件时，我们会在子组件内部使用$emit来触发一个自定义事件，然后在父组件上使用$on来监听这个事件。但在某些特殊情况下，如果子组件中的this指向不是父组件实例，那么$...

AngularJS $on、$emit和$broadcast的使用

10-21

总之，$on、$emit和$broadcast是AngularJS中用于作用域通信的重要工具，合理地使用这些方法可以让数据在应用中高效且安全地流动。开发者需要根据实际情况选择最合适的通信方式，并注意保持应用结构的清晰和简洁。

uniapp返回上一级页面，并附加参数

xiaobai_longma的博客

05-18

1318

触发全局的自定事件。附加参数都会传给监听器回调。 uni.$emit('update',{msg:'页面更新'}) （放在返回事件的前面）监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。 uni.$on('update',function(data){ console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg); }) （可以改为箭头函数，不然this无法指向事件）监听全局的自定

uni——小程序：页面栈、页面通讯、uni.$emit()、uni.$on()、uni.$off(‘‘)

努力、拼搏、奋进

04-23

1114

uni——小程序：页面栈、页面通讯、uni.$emit()、uni.$on()、uni.$off('')

uniapp和vue组件之间的传值方法（父子传值，兄弟传值，跨级传值，vuex）

铁锤妹妹的博客

10-31

1万+

在做vue项目或者uniapp开发微信小程序时，经常会用到组件之间传值，因此想总结记录下。

uni-app 组件与页面事件传值 this.$emit

maoge_666的博客

07-11

1203

uni-app 组件与页面事件传值 this.$emit

uniapp在不同页面间跳转时使用$emit和$on传值无效问题（记录坑）

a666666000的博客

09-08

9887

uniapp在不同页面间跳转时使用$emit和$on传值无效问题

uniapp 使用 this.$emit

09-07

Uni-app 是一个基于 Vue.js 的跨平台开发框架，它可以在多个平台上进行开发，包括小程序、H5、App等。在 Uni-app 中，可以使用 `this.$emit` 来触发一个自定义事件。例如，如果你想在组件 A 中触发一个名为 `customEvent` 的事件，并传递一些数据，可以使用以下代码： ```javascript // 组件 A methods: { handleClick() { this.$emit('customEvent', { data: 'Hello World' }); } } ``` 然后，在组件 B 中可以监听 `customEvent` 事件，并在事件触发时执行相应的逻辑： ```javascript // 组件 B methods: { handleCustomEvent(payload) { console.log(payload.data); // 输出 'Hello World' } }, mounted() { this.$on('customEvent', this.handleCustomEvent); }, beforeDestroy() { this.$off('customEvent', this.handleCustomEvent); } ``` 通过 `this.$emit` 和 `this.$on` 方法，组件之间可以进行事件的通信和数据的传递。需要注意的是，在组件销毁时需要使用 `this.$off` 方法取消事件的监听，以避免内存泄漏。