uniapp页面传参的三种方式实例总结
更新时间：2022年11月24日 15:28:04 作者：隔壁家的帅小姐
在进行页面的跳转的时候,往往需要我们将一些参数携带着传递过去这里的class样式,下面这篇文章主要给大家介绍了关于uniapp页面传参的三种方式,需要的朋友可以参考下
子页面返回父页面传参，使用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')
})
},总结
到此这篇关于uniapp页面传参的三种方式的文章就介绍到这了,更多相关uniapp页面传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
箭头函数是在es6中添加的一种规范,箭头函数相当于匿名函数,简化了函数的定义,下面这篇文章主要给大家介绍了关于JavaScript高级教程之如何玩转箭头函数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
本文主要介绍JavaScript获取当前url根目录的方法，比较实用，需要的朋友可以参考一下。2016-06-06
这篇文章主要介绍了微信小程序swiper使用网络图片不显示问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
最近对eval火爆的讨论，教主 @Franky 和 灰大 @otakustay 也给了精彩的数据分析,刚好之前也做过类似的测试，我也跟风凑个热闹，提供两组数据供大家参考2012-08-08
这篇文章主要介绍了JavaScript模拟重力状态下抛物运动的方法,实例分析了javascript操作dom元素模拟运动的方法,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
极致之美——百行代码实现全新智能语言...2007-03-03
正则表达式（regular expression）是一种字符串匹配的模式，用来检查一个字符串中是否包含指定模式的字符串。下面通过本文给大家分享JavaScript_正则表达式和级联效果，感兴趣的朋友一起看看吧2017-09-09
这篇文章主要介绍了JavaScript中的Promise使用详解,promise对象是JS进阶学习中的重要知识点,需要的朋友可以参考下2021-10-10
项目中需要判断IE版本号，又因为 jQuery 2.0 去除了对浏览器版本号的判断于是就看到一老外写的一段代码，下面与大家分享下2013-09-09
这篇文章主要介绍了JS window对象简单操作,结合完整实例形式分析了JavaScript Window对象各种常见提示框、弹出窗口及时间相关操作技巧,需要的朋友可以参考下2020-01-01
最新评论