uniapp监听事件

uniapp监听事件的实现方法

在uniapp中监听事件可以通过多种方式实现，包括组件事件、全局事件和页面事件。以下是常见的监听事件方法。

组件事件监听

在组件内部使用this.$on方法监听自定义事件。例如，监听一个名为customEvent的事件：

this.$on('customEvent', (data) => {
  console.log('接收到事件数据:', data);
});

全局事件总线

通过uni.$on方法实现全局事件监听。适用于跨组件或跨页面通信：

uni.$on('globalEvent', (data) => {
  console.log('全局事件数据:', data);
});

页面事件监听

在页面生命周期中使用onLoad或onShow监听页面事件：

onLoad() {
  uni.$on('pageEvent', (data) => {
    console.log('页面事件数据:', data);
  });
}

移除事件监听

为避免内存泄漏，需要在适当的时候移除事件监听：

// 移除组件事件
this.$off('customEvent');

// 移除全局事件
uni.$off('globalEvent');

// 移除页面事件
uni.$off('pageEvent');

触发事件

使用this.$emit或uni.$emit触发事件：

// 触发组件事件
this.$emit('customEvent', { key: 'value' });

// 触发全局事件
uni.$emit('globalEvent', { key: 'value' });

注意事项

• 确保在组件销毁或页面卸载时移除事件监听。
• 全局事件总线适用于简单场景，复杂场景建议使用Vuex状态管理。
• 避免过度使用事件监听，以免导致代码难以维护。