vue事件实现
Vue 事件实现方法
在Vue中，事件处理是通过v-on指令或@简写来实现的。以下是几种常见的事件处理方式：
使用v-on指令绑定事件
<button v-on:click="handleClick">点击我</button>使用@简写绑定事件
<button @click="handleClick">点击我</button>事件处理方法
在methods中定义事件处理函数
methods: {
handleClick(event) {
console.log('按钮被点击了', event);
}
}内联事件处理 可以直接在模板中使用简单的JavaScript表达式：
<button @click="count++">增加计数</button>事件修饰符
Vue提供了事件修饰符来简化常见的事件处理需求：
.stop 阻止事件冒泡
<button @click.stop="handleClick">不会冒泡</button>.prevent 阻止默认行为
<form @submit.prevent="onSubmit">不会提交</form>.capture 使用捕获模式
<div @click.capture="doThis">捕获模式</div>.self 只有当事件是从触发元素本身触发时才触发回调
<div @click.self="doThat">仅自身触发</div>按键修饰符
Vue为键盘事件提供了方便的修饰符：
特定按键
<input @keyup.enter="submit">按键码
<input @keyup.13="submit">自定义事件
组件可以通过$emit触发自定义事件：
子组件触发事件
this.$emit('my-event', payload);父组件监听事件
<child-component @my-event="handleCustomEvent"></child-component>事件总线模式
对于非父子组件通信，可以使用事件总线：
创建事件总线
export const EventBus = new Vue();发送事件
EventBus.$emit('event-name', data);接收事件
EventBus.$on('event-name', data => {
console.log(data);
});原生事件绑定
要在组件上监听原生事件，需要使用.native修饰符：
<my-component @click.native="handleNativeClick"></my-component>事件处理最佳实践
- 避免在模板中编写复杂的逻辑，尽量将逻辑放在methods中
- 对于需要多个参数的事件，使用箭头函数或方法调用
- 及时清理事件监听，特别是在组件销毁时
- 对于频繁触发的事件（如scroll、resize），考虑使用防抖或节流
