uni.$emit和uni. $on跳转页面并传递参数

原创 已于 2024-01-31 17:21:31 修改 · 248 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #html5 #css #微信小程序

于 2021-10-14 11:47:13 首次发布
本文详细介绍了如何在uni-app中使用uni.$emit和uni.$on方法来实现在A页面携带参数跳转到B页面，并在B页面接收参数，同时关闭A页面的功能。讲解了相关事件监听和触发的步骤，以及注意事项。

uni.$emit和uni. $on跳转页面并传递参数

如：在A页面携带参数（path）跳转到B页面并关闭当前页面
1、A页面请添加图片描述
2、B页面
请添加图片描述

webhhhhhh
关注
uni.$emit和uni.$on用法；uni-app微信小程序页面通讯；微信小程序页面通讯
i_am_a_div的博客
10-13 3291
uni-app的官方api uni.$on 场景：微信小程序两个页面甚至多个页面之间，可能共用一个参数或者需要相互传递使用参数。例如页面A点击按钮，需要把A页面的item数据，赋值给页面B的formData，但是页面A只是传递数据给B，却不跳转到B。导致无法通过页面路径跳转传递参数，此时最好的办法就是使用页面通讯。 A页面：uni.$emit传递数据data methods:{ //获取数据 getData(){ let item={name:'张三',age:18} //
uniapp页面通讯-uni.$emit、uni.$on、uni.$once、uni.$off
LzzMandy的博客
08-29 4197
uniapp页面通讯-uni.$emit、uni.$on、uni.$once、uni.$off
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在不同页面间跳转时使用$emit和$on传值无效问题（记录坑）
a666666000的博客
09-08 1万+
uniapp在不同页面间跳转时使用$emit和$on传值无效问题
uni-app如何页面传参数的几种方法总结
11-21
uni.$emit(eventName,OBJECT) 触发全局的自定事件。附加参数都会传给监听器回调。 其中eventName为事件名，OBJECT为触发事件附加参数 示例代码如下： uni.$emit('update',{msg:'页面更新'}) uni.$on(eventName,callback) 监听全局自定义事件，事件由uni.$emit()触发，回调函数会接收所有传入的数。 eventName为事件名，callback为事件的回调函数。 示例代码如下： uni.$on('update',function(data){ console.log('监听到事件来自
uniapp页面之间自定义事件传递数据---uni.$emit与uni.$on
m0_58047199的博客
01-03 955
在uniapp中，我们有时候需要进行页面传参，传递一些数据，但是又不是父子组件传值，比如一个现实场景，一个页面调用了一个添加数据的接口，当我们返回展示这些已经添加的数据页面是，就可以通过判读是否添加成功，来刷新另一个页面的列表展示数据。当add接口调用成功后，我们就可以用到这个小知识点。
解决vue bus.$emit触发第一次$on监听不到问题
10-15
并在组件中使用$on方法监听事件，使用$emit方法触发事件： ```javascript bus.$on('test', function(msg) { console.log(msg); }); // 触发事件 bus.$emit('test', 11); ``` 为了防止组件销毁时未注销事件监听器...
uniapp页面间通信uni.$on与通过uni.navigateTo中eventChannal的方式的区别
最新发布
u014642921的博客
06-26 310
【代码】uniapp页面间通信uni.$on与通过uni.navigateTo中eventChannal的方式的区别。
UNI-APP_解决uni-app页面通讯(uni.$emit()、uni.$on())无效的BUG
小歪博客
01-09 2293
解决uni-app页面通讯(uni.$emit()、uni.$on())无效的BUG
[uniapp] 跨页面传值 uni.$emit 和 uni.$on 的使用方法 以及遇到的坑
热门推荐
一起来讨论学习前端技术吧
09-05 3万+
[uniapp] 跨页面传值 uni.$emit 和 uni.$on 的使用方法 以及遇到的坑
uni-app使用uni.$emit()和uni.$on()传值后列表页面不渲染
飞蛾逐月
04-23 774
更新数组要用.splice(索引, 数量, 元素)
使用uni.$emit()以及uni.$on()进行页面传参以数据无法渲染的问题
weixin_45865350的博客
02-10 887
使用uni.$emit()以及uni.$on()进行页面传参以数据无法渲染的问题
uniapp 跨页面传值及跨页面方法调用
weixin_44167504的博客
11-15 2016
1、跨页面传值 2、跨页面方法调用
uniapp 页面跳转 详细（如何传递对象）页面之间如何传值$emit, $on 时机。还有对应的新写法
weixin_45932463的博客
10-24 1万+
1. 常用方式 uni.navigateTo({ url:'/pages/index/test', //建议这么写 }) //或者 <navigator url="./test" animation-type="pop-in">挑战2</navigator> 2.情况1. 在当前页面跳转到test页面的时候 我希望传递一些参数 uni.navigateTo({ url:`/pages/index/test?id={this.id}&name=${this.name}`
关于uniapp项目中页面之间传递数据的三种方式
m0_58889179的博客
03-13 2万+
uniapp页面之间传值的三种方式
uni-app如何跨页面传参
前端泡面人
10-11 611
uni-app跨页面通信
uniapp中$emit,$on,跳转页面时的使用方法
junjunai2009的博客
05-04 433
uniapp页面跳转时如何使用$emit传参，并在页面进行接收
uni.$emit、un.$on实现跳转指定页面后提示用户保存成功
09-30
uni.$emit 和 uni.$on 是 UniApp 开发框架中的事件总线机制，用于组件之间的通信。当你需要在一个组件完成操作后通知另一个组件时，可以使用这两个方法。 `uni.$emit` 用于触发一个自定义事件并传递数据。例如，在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值