uniapp监听服务器消息,事件的监听注册以及触发

> uniapp 提供了事件的监听注册以及触发，注册的事件都是 App 全局级别的，可以很方便的跨任意组件，页面，nvue，vue 等。

[TOC]

### 相关注册或触发函数

> 参考：https://uniapp.dcloud.io/api/window/communication

#### uni.$emit(eventName,OBJECT)

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

#### uni.$on(eventName,callback)

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

#### uni.$once(eventName,callback)

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

#### uni.$off([eventName, callback])

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

### 场景案例

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

#### 监听事件

> 在“用户中心“页面 监听事件。

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

~~~

点我登录

用户token:{{usnerInfo.token}},用户昵称：{{usnerInfo.nickName}}

export default {

data() {

return {

usnerInfo : null

}

},

onLoad() {

// 监听事件

console.log('on login....');

uni.$on('login',(uinfo)=>{

this.usnerInfo = uinfo;

})

},

onUnload() {

// 移除监听事件

console.log('off login....');

uni.$off('login');

},

methods: {

}

}

~~~

#### 触发事件

> 进入登陆页面，触发事件

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

~~~

登录

export default {

data() {

return {};

},

methods: {

login() {

// 假设用户登录成功，此时调用emit方法触发监听事件，刷新用户登录信息

uni.$emit('login', {

token: 'user123456',

nickName: 'wk123',

});

}

}

}

~~~

### 更多使用场景

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

* vue 与 nvue，nvue 与 vue 间的通讯

* tabbar 页面之间的通讯

* 父页面与多级子页面间的通讯

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