# uni.$emit()和uni.$on() 进行页面间通讯的常用场景以及使用uni.$emit、 uni.$on 、

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

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

第一种办法：使用store对用户纤细进行状态管理，用户信息的组件中直接取store中的用户数据

第二种办法：uni. $emit()和uni.$ on()

监听事件

首先，在我的页面监听事件。

// 我的页面  
onLoad(){  
    // 监听事件  
    uni.$on('login',(usnerinfo)=>{  
        this.usnerinfo = usnerinfo;  
    })  
},  
onUnload() {  
    // 移除监听事件  
    uni.$off('login');  
},
    
//或者我的页面中引入的用户信息的组件中
mounted() {
    // 监听事件  
    uni.$on('login',(usnerinfo)=>{  
        this.usnerinfo = usnerinfo;  
    }) 
}
destroyed() {
    uni.$off('login');
},

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

触发事件

进入登陆页面，触发事件

// 登陆页面  
uni.$emit('login', {  
    avatarUrl: '我是用户的头像url',  
    token: '我是token',  
    userName: '我是用户名',  
    login: true  
});

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

# uni.$emit()和uni.$on() 进行页面间通讯的常用场景以及使用

监听事件

触发事件

更多常用的使用场景