vue实现事件绑定的是

Vue 事件绑定实现方式

Vue 通过 v-on 指令或 @ 简写实现事件绑定，支持多种事件处理方式。

基础语法

<button v-on:click="handleClick">点击事件</button>
<button @click="handleClick">简写方式</button>

内联事件处理

直接在模板中编写简单逻辑：

<button @click="count++">增加计数</button>

方法事件处理

调用组件中定义的方法：

methods: {
  handleClick(event) {
    console.log(event.target.tagName);
  }
}

事件修饰符

Vue 提供特殊后缀实现常见事件处理需求：

• .stop 阻止事件冒泡
• .prevent 阻止默认行为
• .capture 使用捕获模式
• .self 仅当事件从元素本身触发时生效
• .once 只触发一次
• .passive 提升滚动性能

<form @submit.prevent="onSubmit"></form>
<a @click.stop.prevent="doThat"></a>

按键修饰符

为键盘事件提供便捷处理：

<input @keyup.enter="submit" />
<input @keyup.page-down="onPageDown" />

系统修饰键

处理组合按键场景：

<div @click.ctrl="doSomething">Ctrl+Click</div>
<input @keyup.alt.67="clear" />

鼠标按钮修饰符

区分鼠标左右键：

<button @click.right="rightClick">右键点击</button>

自定义事件

子组件向父组件通信：

// 子组件
this.$emit('my-event', payload)

// 父组件
<child-component @my-event="doSomething"></child-component>

事件总线模式

跨组件通信方案：

// 创建事件总线
const EventBus = new Vue()

// 发送事件
EventBus.$emit('event-name', data)

// 接收事件
EventBus.$on('event-name', data => {
  // 处理逻辑
})

注意事项

• 事件处理函数应避免直接操作DOM
• 复杂逻辑建议在methods中封装
• 移除事件监听时需手动销毁，防止内存泄漏