uniapp $on

uniapp $on 方法详解

$on 是 UniApp 中用于监听全局事件的 API，常用于跨页面或跨组件通信。它基于 Vue 的事件机制，允许在全局范围内触发和监听自定义事件。

基本语法

uni.$on(eventName, callback)

• eventName：字符串类型，表示事件名称。
• callback：事件触发时的回调函数，接收事件参数。

使用场景

1. 跨页面通信：例如在页面 A 触发事件，页面 B 监听并响应。
2. 全局状态管理：替代简单的 Vuex 场景，实现轻量级状态共享。
3. 插件通信：在插件或模块间传递消息。

示例代码

监听事件

// 在页面或组件的生命周期中监听
export default {
  onLoad() {
    uni.$on('updateData', (data) => {
      console.log('接收到数据:', data)
      this.data = data
    })
  }
}

触发事件

// 在任意地方触发事件
uni.$emit('updateData', {msg: 'Hello World'})

注意事项

• 内存泄漏：组件销毁时需手动移除监听，否则可能导致回调函数堆积。
• 事件命名冲突：建议使用命名空间（如 module:event）避免重复。
• 性能影响：频繁使用可能影响性能，复杂场景建议使用 Vuex。

移除监听

通过 uni.$off 移除指定事件监听：

// 移除单个事件
uni.$off('updateData', callback)

// 移除所有事件
uni.$off('updateData')

兼容性

• 支持 H5、小程序及 App 端。
• 小程序端需注意部分平台的事件队列差异。