场景:用户点外卖要改地址,订单页-->地址选择页-->更改地址-->返回订单页-->地址改变了
【 订单页:】
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里执行销毁,在其他地方也可)
以上只是一些简单用法,帮助理解和使用uniapp的全局页面通讯。如果有更深的需求。请移步至(ps:虽然官方文档讲的不咋地)
官网介绍: https://uniapp.dcloud.io/api/window/communication
官方示例: https://ask.dcloud.net.cn/article/id-36010