uniapp页面传参的三种方式实例总结
隔壁家的帅小姐 人气:0子页面返回父页面传参,使用uni.$emit和uni.$on页面通讯
一,uni.$emit(eventName,OBJECT)
触发全局的自定义事件,附加参数都会传给监听回调。
eventName为事件名,object为触发事件附加参数。
代码如下:
uni.$emit('gotoNext',{msg:'刷新页面'})
二, uni.$on(eventName,Callback)
监听全局自定义事件,事件由uni.$emit()触发,回调函数会接收所有传入的数。
eventName为事件名,Callback为回调函数。
代码如下:
uni.$on('goto',function(data){console.log('监听到事件来自goto,所带参数msg 为:' +data.msg)})
作用:
开发中对触发页面动态更新将非常又效果。
比如说移动项目通过自己编写的组件(tabbar)进行tabar跳转,这个时候要是某应该页面微信支付成功了,需要返回tabbar页面,你会发现,它不会像其他普通的uni页面,(onshow生命周期)会动态刷新,影响用户体验。所以这个方法很有效,只需要在组件中写入uni.emit(update.masq:'页面刷新')
然后在页面使用uni.on('update',function(data){ console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg); })
接收,将函数写入即可。实际应用例子如下:
onShow() { switch (this.Tab){ case 'demo': uni.$emit('goto',{msg:'页面更新'}); break; } },
text页面
created() { uni.$on('goto', (res) => { this.list() console.log(res, '更新'); }) },
三,uni.$off([eventName, callback])移除全局自定义事件监听器。
针对于页面传参请直接使用Vue的全局变量更方便 ,因为uni-app框架的uni.$emit()和$on() 虽然使用了定时器能接收到参数,但是不知道为什么第一次总是接收不到导致很多为!但是使用Vue的全局变量能搞定一切!
最后一个小举例:
//从A跳转B页面,B页面返回A页面时传参 //B页面 uni.$emit("targetEvent",{shiftOverId:that.shiftOverId,productOrderId:that.productOrderId }) uni.navigateBack(); //A页面 onLoad: function (e) { uni.$on("targetEvent",(e)=>{ this.preId = JSON.parse(e.shiftOverId) this.productOrderId = JSON.parse(e.productOrderId) uni.$off('targetEvent') }) },
总结
加载全部内容