明天的明天 永远的永远 未知的一切 我与你一起承担 ??

是非成败转头空 青山依旧在 几度夕阳红 。。。
  博客园  :: 首页  :: 管理

uniapp页面通讯讲解之uni.$emit、uni.$on、uni.$once和uni.$off

Posted on 2025-03-06 08:49  且行且思  阅读(1339)  评论(0)    收藏  举报

uni.$emit(eventName,OBJECT)

触发全局的自定义事件。附加参数都会传给监听器回调。

uni.$on(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发,回调函数会接收所有传入事件触发函数的额外参数。

uni.$once(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发,但是只触发一次,在第一次触发之后移除监听器。

uni.$off([eventName, callback])

移除全局自定义事件监听器。

注意事项

  • uni.$emit、 uni.$on 、 uni.$once 、uni.$off 触发的事件都是 App 全局级别的,跨任意组件,页面,nvue,vue 等
  • 使用时,注意及时销毁事件监听,比如,页面 onLoad 里边 uni.$on 注册监听,onUnload 里边 uni.$off 移除,或者一次性的事件,直接使用 uni.$once 监听

使用场景

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

1、在我的页面,监听事件

<template>
    <view class="content">
        <text v-if="usnerinfo">{{usnerinfo.userName}}</text>
        <button v-else @click="toLogin">去登录</button>
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                usnerinfo: null
            }
        },
        // 我的页面  
        onLoad() {
            // 监听事件,使用 uni.$emit 触发事件后,对应的 uni.$on 就会监听到事件触发,在回调中去执行相关的逻辑。
            uni.$on('login', (usnerinfo) => {
                this.usnerinfo = usnerinfo;
            })
        },
        onUnload() {
            // 移除监听事件  
            uni.$off('login');
        },
        methods: {
            toLogin() {
                uni.navigateTo({
                    url: '/pages/a/a'
                })
            },
        }
    }
</script>

2、在登录页,触发事件

<template>
    <view class="content">
        <view class="data" @click="doLogin">触发方法,获取用户信息</view>
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                usnerinfo: null
            }
        },
        // 我的页面  
        onLoad() {},
        methods: {
            doLogin() {
                // 登陆页面  
                uni.$emit('login', {
                    userName: 'lzzzzzzzzzzzzzzzzzzzzz',
                    login: true
                });
                uni.navigateBack({})
            }
        }
    }
</script>
 

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