QQ咨询 官方微信

添加微信好友

官方小程序

百度小程序

微信小程序

头条小程序

关于我们

uniapp

uniapp中使用uni.$emit和uni.$on进行页面通讯传值

 admin  2022-09-06 21:38:08
1.uni.$emit、uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等
2.使用时,注意及时销毁事件监听,比如,页面 onLoad 里边 uni.$on 注 册 监 听 ,onUnload里边uni.$off 移除,或者一次性的事件,直接使用 uni.$once 监听

A页面传值,使用uni.$emit
  1. <script> 
  2.     export default { 
  3.         data() { 
  4.             return {}; 
  5.         }, 
  6.         onLoad() { 
  7.             uni.$emit('dianji', { 
  8.                 name:'老王' 
  9.             }); 
  10.         } 
  11.     }; 
  12. </script> 
B页面接收值,使用uni.$on或uni.$once监听
  1. script> 
  2.   export default { 
  3.       data() { 
  4.           return {  
  5.              name:'' 
  6.           };   
  7.       }, 
  8.       onLoad() { 
  9.            // 监听事件 
  10.           uni.$on('dianji',function(data){ 
  11.             this.name=data.name 
  12.                 console.log('A页面传的值为:' + data.name); 
  13.             }); 
  14.       }, 
  15.       onUnload() { 
  16.           // 移除监听事件 
  17.           uni.$off('dianji'); 
  18.       } 
  19.   }; 
  20. </script> 
当访问A页面的时候,会自动触发“dianji”事件,此时B页面就会监听到,而去触发你的逻辑


¥ 打赏
×
如果您觉得文章帮助了您就打赏一下吧
非常感谢你的打赏,我们将继续分享更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

本文《uniapp中使用uni.$emit和uni.$on进行页面通讯传值》发布于石头博客文章,作者:admin,如若转载,请注明出处:https://www.pweb123.com/frame/uniapp/909.html,否则禁止转载,谢谢配合!

文章点评

我来说两句 已有0条评论
点击图片更换

添加微信好友

添加微信好友

微信小程序

百度小程序