• 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

  • 相关阅读:
    MySQL数据库之索引
    python面向对象编程
    linux端口占用
    lintcode
    java基础
    lintcode
    linux 常用命令
    Docker & Kubernates
    angular preparation
    java 命令行
  • 原文地址:https://www.cnblogs.com/huihuihero/p/12966369.html
Copyright © 2020-2023  润新知