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);
});
}
