uniapp的$emit,$on,$once,$off的简单使用

本文详细描述了在一个外卖应用中,如何使用Vue.js的$on和$off方法实现订单地址的切换,包括在订单页和地址选择页之间的通信,以及在生命周期管理中确保事件监听的正确销毁。

场景:用户点外卖要改地址,订单页-->地址选择页-->更改地址-->返回订单页-->地址改变了

【 订单页:】
onUnload(){
    uni.$off('selectAddress')  //在此生命周期里销毁地址改变事件的监听
}

methods:{
    changeAddress(){  //点击切换地址按钮触发此函数
          uni.$on('selectAddress',(info)=>{  //开启监听全局的地址改变事件
                this.address=info.address
          })
          uni.navigateTo({  //跳转至选择地址页面
                url:'/pages/user-info/info-address/info-address'
          })
    }
}

【 地址选择页:】
methods:{
    handleSelect(data){
          uni.$emit('selectAddress',{  //选择地址完成后,触发全局的地址改变事件,并传递参数给监听器即uni.$on。此时在订单页的uni.$on中,已经拿到了数据并将地址赋值给了address变量
                address: data.address,
                phone: data.phone,
                name: data.name
          })
    }
}


注:
1、$off提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器。如果只提供事件,不提供回调函数,则移除该事件所有的监听器。所以一般建议直接uni.$off('xxx'),销毁监听里不使用回调,简单粗暴好用。
2、$on监听函数,拿数据用。$emit传数据用。
3、如果使用了$on,请不要忘记在onUnload()生命周期里$off销毁监听,否则会重复监听。(也可不在onUnload里执行销毁,在其他地方也可)
 

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值