uniapp的$emit,$on,$once,$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里执行销毁，在其他地方也可）

以上只是一些简单用法，帮助理解和使用uniapp的全局页面通讯。如果有更深的需求。请移步至（ps:虽然官方文档讲的不咋地）
官网介绍： https://uniapp.dcloud.io/api/window/communication
官方示例： https://ask.dcloud.net.cn/article/id-36010

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

猜你喜欢