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('update',function(data){ console.log('监听到事件来自 update ,携带参数 msg 为:' + data.msg); })
接收,将函数写入即可。实际应用例子如下:
组件中:
onShow() { switch (this.Tab){ case 'demo': uni.$emit('update',{msg:'页面更新'}); break; } },
demo页面中:
created() { uni.$on('update', (res) => { this.list() console.log(res, '更新'); }) },
测试最终结果:
针对于页面传参请直接使用Vue的全局变量更方便 ,因为uni-app框架的uni.$emit()和$on() 虽然使用了定时器能接收到参数,但是不知道为什么第一次总是接收不到导致很多为!后续有时间在慢慢研究为什么?但是使用Vue的全局变量能搞定一切!
如何使用uni.$emit()和uni.$on() 进行页面间通讯【有一个坑务必注意】
参考官方文档,然后记住一句话:
必须先跳转打开页面,才能发射参数,否则发射无效,接收页面无法接收
其次,如果遇到一次接收无效可能需要发送的时候增加一个定时器,不然接收$on的回调函数可能不执行
参考官方文档:https://ask.dcloud.net.cn/article/36010
<template> <view> <button @tap="click"> 点击发射 </button> </view> </template> <script> import Vue from "vue"; export default { methods: { click() { // 【非常重要】必须先跳转打开页面,才能发射参数,否则发射无效,接收页面无法接收 Vue.prototype.$uniReLaunch("/pages/test/test001"); uni.$emit("test", { test: "成功", }); console.log("发射事件test成功"); }, }, }; </script>
<template> <view></view> </template> <script> export default { onLoad() { uni.$on("test", (data) => { console.log("接收事件test成功,data=", data); }); }, }; </script>
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]