> 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`移除全局的事件监听，避免重复监听。 ~~~ <template> <view class="content"> <navigator url="/pages/login/index" hover-class="navigator-hover"> <button type="default">点我登录</button> </navigator> <view v-if="usnerInfo !== null"> <view> 用户token:{{usnerInfo.token}},用户昵称：{{usnerInfo.nickName}} </view> </view> </view> </template> <script> 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: { } } </script> ~~~ #### 触发事件 > 进入登陆页面，触发事件 > 使用`uni.$emit`触发事件后，对应的`uni.$on`就会监听到事件触发，在回调中去执行相关的逻辑。 ~~~ <template> <view> <button type="default" @click="login">登录</button> </view> </template> <script> export default { data() { return {}; }, methods: { login() { // 假设用户登录成功，此时调用emit方法触发监听事件，刷新用户登录信息 uni.$emit('login', { token: 'user123456', nickName: 'wk123', }); } } } </script> ~~~ ### 更多使用场景 > 以上只是一个简单的场景应用。而我们开发中会遇到很多页面间通讯场景，如： * vue 与 nvue，nvue 与 vue 间的通讯 * tabbar 页面之间的通讯 * 父页面与多级子页面间的通讯 > 基本上述场景均可以实现，本质上就是一个页面通知另一个面我发生了变化，你需要处理一下。绝大部分页面的通讯都可以使用`uni.$emit`、`uni.$on`、`uni.$once`、`uni.$off`四个事件完成。