vue如何实现事件处理
Vue 事件处理基础
Vue 通过 v-on 指令（简写为 @）实现事件绑定。语法格式为 v-on:事件名="处理函数" 或 @事件名="处理函数"。例如点击事件：
<button v-on:click="handleClick">点击</button>
<!-- 简写形式 -->
<button @click="handleClick">点击</button>在 Vue 实例的 methods 中定义事件处理函数：
methods: {
handleClick() {
console.log('按钮被点击');
}
}事件修饰符
Vue 提供事件修饰符，用于简化常见事件处理逻辑：
-
.stop：阻止事件冒泡<button @click.stop="handleClick">不会冒泡</button> -
.prevent：阻止默认行为<form @submit.prevent="onSubmit">阻止表单提交</form> -
.capture：使用捕获模式 -
.self：仅当事件从元素本身触发时执行 -
.once：事件只触发一次 -
.passive：提升滚动性能
多个修饰符可串联使用：
<a @click.stop.prevent="handleLink">阻止默认且停止冒泡</a>按键修饰符
处理键盘事件时，可使用特定按键修饰符：
<input @keyup.enter="submit" placeholder="按回车提交">常用按键别名包括 .enter、.tab、.delete、.esc、.space、.up、.down、.left、.right。
系统修饰键
组合键可通过 .ctrl、.alt、.shift、.meta 处理：
<button @click.ctrl="handleCtrlClick">需按住Ctrl点击</button>鼠标按钮修饰符
.left、.right、.middle 指定鼠标按键：
<button @click.right="handleRightClick">右键点击</button>自定义事件
子组件通过 $emit 触发自定义事件：
// 子组件
this.$emit('custom-event', payload)父组件通过 v-on 监听：
<child-component @custom-event="handleCustomEvent"></child-component>事件总线（Event Bus）
创建全局事件总线实现非父子组件通信：
// 创建Event Bus
const bus = new Vue()
// 发送事件
bus.$emit('event-name', data)
// 接收事件
bus.$on('event-name', (data) => {
// 处理逻辑
})原生事件绑定组件
在组件上监听原生事件需添加 .native 修饰符：
<my-component @click.native="handleClick"></my-component>Vue 3 中该修饰符已被移除，需使用 emits 选项显式声明事件。
事件处理中的 this 指向
methods 中的函数自动绑定当前 Vue 实例，箭头函数会改变 this 指向，应避免使用：
methods: {
// 正确写法
handleClick() {
this.message = 'Clicked' // this 指向Vue实例
},
// 错误写法（箭头函数）
badHandleClick: () => {
this.message = 'Error' // this 不再指向Vue实例
}
}
