vue实现事件绑定的是

Vue 事件绑定实现方式

Vue 通过 v-on 指令实现事件绑定，语法为 v-on:事件名="处理函数" 或简写为 @事件名="处理函数"。

基础用法

<button v-on:click="handleClick">点击触发</button>
<!-- 简写形式 -->
<button @click="handleClick">点击触发</button>

内联处理

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

方法处理 需在 Vue 实例的 methods 中定义函数：

methods: {
  handleClick(event) {
    console.log('事件触发', event.target);
  }
}

事件修饰符

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

• .stop：阻止事件冒泡

  <button @click.stop="handleClick">不会冒泡</button>

• .prevent：阻止默认行为

  <form @submit.prevent="onSubmit">不刷新页面</form>

• .capture：使用捕获模式
• .self：仅当事件从元素本身触发时生效
• .once：只触发一次
• .passive：改善移动端滚动性能

按键修饰符

针对键盘事件提供便捷绑定：

<input @keyup.enter="submit" />
<!-- 组合键示例 -->
<input @keyup.ctrl.enter="specialSubmit" />

支持常用按键别名：.enter, .tab, .delete, .esc, .space, .up, .down, .left, .right

系统修饰键

.ctrl, .alt, .shift, .meta（Mac 的 Command 键）

<div @click.ctrl="doSomething">需按住 Ctrl 点击</div>

鼠标按钮修饰符

.left, .right, .middle 限定特定鼠标按键触发

<button @click.right="rightClick">右键触发</button>

自定义事件

子组件通过 $emit 触发事件：

// 子组件
this.$emit('custom-event', data)

父组件监听：

<child-component @custom-event="handleCustomEvent" />

事件总线模式

创建全局事件中心：

// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

组件间通信：

// 发送方
EventBus.$emit('event-name', payload)

// 接收方
EventBus.$on('event-name', callback)