vue实现事件监听
Vue 事件监听实现方法
Vue 提供了多种方式实现事件监听，适用于不同场景的需求。以下是常见的几种方法：
1. 使用 v-on 指令
<button v-on:click="handleClick">点击触发事件</button>
<!-- 简写形式 -->
<button @click="handleClick">简写点击</button>在 Vue 实例的 methods 中定义事件处理函数：
methods: {
handleClick(event) {
console.log('按钮被点击', event);
}
}2. 监听子组件事件
父组件监听子组件触发的自定义事件：
<child-component @custom-event="handleCustomEvent"></child-component>子组件触发事件：
this.$emit('custom-event', eventData);3. 使用 $on 方法
适用于监听 Vue 实例上的事件：
created() {
this.$on('custom-event', this.handleEvent);
},
methods: {
handleEvent(data) {
console.log('收到事件数据:', data);
}
}触发该事件：
this.$emit('custom-event', { message: '测试数据' });4. 监听原生 DOM 事件
在组件上监听原生事件需要添加 .native 修饰符：
<my-component @click.native="handleClick"></my-component>5. 事件修饰符
Vue 提供的事件修饰符可以简化常见事件处理：
<!-- 阻止默认行为 -->
<form @submit.prevent="onSubmit"></form>
<!-- 停止事件冒泡 -->
<div @click.stop="doThis"></div>
<!-- 按键修饰符 -->
<input @keyup.enter="submit">6. 移除事件监听
使用 $off 移除事件监听：
// 移除特定事件
this.$off('custom-event', this.handleEvent);
// 移除所有事件
this.$off();注意事项
- 组件销毁前应移除自定义事件监听，避免内存泄漏
- 事件命名建议使用 kebab-case（短横线命名）
- 对于频繁触发的事件（如滚动、鼠标移动），考虑使用防抖或节流优化性能
以上方法覆盖了 Vue 中事件监听的主要场景，开发者可根据具体需求选择合适的方式。
