uniapp——页面传参数的几种方法总结

莫比乌斯的日落

已于 2022-06-23 19:12:05 修改

阅读量3.2k

点赞数 1

分类专栏： uniapp 文章标签：前端前端框架

于 2022-06-16 22:58:28 首次发布

本文链接：https://blog.csdn.net/aliyun3/article/details/124354883

版权

本文总结了uniapp中页面传参数的两种方法：uni.$emit和uni.$on。uni.$emit用于触发全局自定义事件，附加参数传递给监听器；uni.$on用于监听这些事件。在实际开发中，如需动态更新页面，这种方法十分有效。然而，使用Vue的全局变量可能是更简便的选择，因为uni.$emit有时可能存在首次接收不到参数的问题。同时，使用uni.$emit进行页面间通讯时要注意，必须先打开页面再发射参数，否则接收无效，可能需要添加定时器确保接收成功。

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

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('监听到事件来自 update ，携带参数 msg 为：' + data.msg); })

作用
实际开发中对于触发页面的动态更新将非常有效。
例如移动端项目通过自己编写的组件替代tabbar进行tabar跳转，恰逢这时某个页面如微信支付成功，需要返回这个tabbar页面，你会发现他不会像普通uni页面（onshow生命周期）一样会动态刷新，这就很影响用户实际体验。因此这个方法就很有效，只需要在组件中写入uni.emit(update.masq:'页面刷新')然后在页面使用uni.on('