uniapp监听事件

uniapp监听事件的常见方法

通过@绑定事件 在模板中直接使用@符号绑定事件，例如点击事件：

<button @click="handleClick">点击按钮</button>

对应的methods中定义方法：

methods: {
  handleClick() {
    console.log('按钮被点击');
  }
}

使用uni.$on全局监听 适用于跨页面或组件通信，在发送方使用uni.$emit：

uni.$emit('eventName', {data: '传递的数据'});

在接收方使用uni.$on监听：

uni.$on('eventName', (data) => {
  console.log('接收到的数据:', data);
});

使用uni.$once单次监听 与uni.$on类似，但只触发一次：

uni.$once('eventName', (data) => {
  console.log('仅触发一次的数据:', data);
});

组件间通信 父子组件间通过props和$emit： 子组件触发事件：

this.$emit('customEvent', {value: '数据'});

父组件监听：

<child-component @customEvent="handleCustomEvent"></child-component>

页面生命周期监听 在页面生命周期中监听事件，例如onLoad：

onLoad() {
  uni.$on('pageEvent', this.handlePageEvent);
},
onUnload() {
  uni.$off('pageEvent', this.handlePageEvent);
}

注意事项

• 使用uni.$on后，务必在onUnload或合适时机用uni.$off解除绑定，避免内存泄漏。
• 事件名称建议使用常量管理，避免拼写错误。
• 跨页面通信时，注意页面栈生命周期，可能需延迟监听。

监听原生事件示例

监听返回按钮事件：

onBackPress() {
  console.log('返回按钮被按下');
  return true; // 阻止默认返回行为
}

监听网络状态变化：

onLoad() {
  uni.onNetworkStatusChange((res) => {
    console.log('网络状态变化:', res);
  });
}