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的全局页面通讯。如果有更深的需求。请移步至
官网介绍: https://uniapp.dcloud.io/api/window/communication
官方示例: https://ask.dcloud.net.cn/article/id-36010

posted @ 2021-11-23 13:47  疯子110  阅读(1301)  评论(0编辑  收藏  举报