侧边栏壁纸
  • 累计撰写 2,046 篇文章
  • 累计创建 73 个标签
  • 累计收到 20 条评论

目 录CONTENT

文章目录

Uniapp的uni.$emit()和uni.$on() 如何使用

大猿本猿
2023-02-20 / 1,460 阅读 / 480 字
" "

uni.$emit​、 uni.$on​ 、 uni.$once​ 、uni.$off​ ,可以方便的进行页面的通讯 ,触发的事件都是 App 全局级别的,跨任意组件,页面。

使用场景:假设一个场景,进入app,是未登陆状态,需要在我的页面点击登陆,进入登陆页面进行登陆。登陆成功之后,返回到我的页面,实时显示登陆后的用户信息。

监听事件

// 我的页面  
onLoad(){  
    // 监听事件  
    uni.$on('login',(usnerinfo)=>{  
        this.usnerinfo = usnerinfo;  
    })  
},  
onUnload() {  
    // 移除监听事件  
        uni.$off('login');  
    },

因为事件监听是全局的,所以使用 uni.$on​ ,需要使用 uni.$off​ 移除全局的事件监听,避免重复监听。

触发事件

进入登陆页面,触发事件

// 登陆页面  
uni.$emit('login', {  
                avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',  
                token: 'user123456',  
                userName: 'unier',  
                login: true  
            });

使用 uni.on 就会监听到事件触发,在回调中去执行相关的逻辑。

更多使用场景

以上只是一个简单的场景应用。而我们开发中会遇到很多页面间通讯场景,如:

  • vue 与 nvue,nvue 与 vue 间的通讯
  • tabbar 页面之间的通讯
  • 父页面与多级子页面间的通讯

基本上述场景均可以实现,本质上就是一个页面通知另一个面我发生了变化,你需要处理一下。绝大部分页面的通讯都可以使用 uni.$emit​、 uni.$on​ 、 uni.$once​ 、uni.$off​ 四个事件完成。

Tips

  • 如果页面没有打开,将不能 注册监听事件 uni.$on​ 和 uni.$once​ 。
  • 一次性的事件,直接使用 uni.$once​ 监听,不需要移除。