vue事件实现
Vue 事件实现基础
在 Vue 中，事件通过 v-on 指令或 @ 简写绑定到 DOM 元素或组件上。事件触发时会执行指定的方法或表达式。
<button v-on:click="handleClick">点击</button>
<!-- 简写形式 -->
<button @click="handleClick">点击</button>事件处理方法
事件处理方法通常定义在 Vue 实例的 methods 选项中。方法可以接收原生 DOM 事件对象作为参数。
methods: {
handleClick(event) {
console.log('按钮被点击', event.target);
}
}内联事件处理
可以直接在模板中编写简单的 JavaScript 表达式，而不必定义单独的方法。
<button @click="count++">增加计数</button>事件修饰符
Vue 提供了一系列事件修饰符来处理常见的 DOM 事件细节，这些修饰符以点号表示。
.stop：阻止事件冒泡.prevent：阻止默认行为.capture：使用捕获模式.self：只有当事件是从侦听器绑定的元素本身触发时才触发回调.once：只触发一次.passive：提升移动端性能
<form @submit.prevent="onSubmit">...</form>
<a @click.stop.prevent="doThat">...</a>按键修饰符
Vue 允许为键盘事件添加特定的按键修饰符。
<input @keyup.enter="submit" />
<!-- 组合键 -->
<input @keyup.ctrl.enter="submit" />系统修饰键
可以使用系统修饰键来触发鼠标或键盘事件监听器。
<!-- Alt + C -->
<input @keyup.alt.67="clear" />
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>自定义事件
在组件中可以使用 $emit 方法触发自定义事件，父组件可以监听这些事件。
// 子组件
this.$emit('custom-event', payload);<!-- 父组件 -->
<child-component @custom-event="handleCustomEvent"></child-component>事件总线模式
对于非父子组件间的通信，可以创建一个中央事件总线。
// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();// 发送事件
EventBus.$emit('event-name', data);
// 接收事件
EventBus.$on('event-name', data => {
// 处理数据
});移除事件监听
为了避免内存泄漏，应该在组件销毁前移除事件监听。
beforeDestroy() {
EventBus.$off('event-name');
}原生事件绑定到组件
使用 .native 修饰符可以将原生事件直接绑定到组件的根元素上。
<my-component @click.native="handleClick"></my-component>Vue 3 中的变化
在 Vue 3 中，.native 修饰符已被移除，需要使用 emits 选项显式声明组件发出的事件。
// 子组件
emits: ['custom-event'],
methods: {
triggerEvent() {
this.$emit('custom-event', data);
}
}<!-- 父组件 -->
<child-component @custom-event="handleEvent" />性能优化
对于高频触发的事件（如滚动、输入），可以使用 .passive 修饰符或防抖/节流技术优化性能。
methods: {
handleScroll: _.throttle(function() {
// 处理滚动
}, 100)
}
