vue实现事件绑定的是

Vue 事件绑定的实现方式

Vue 通过 v-on 指令或简写 @ 实现事件绑定，支持原生 DOM 事件和自定义事件。

基本语法

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

方法定义

在 Vue 实例的 methods 中定义事件处理函数：

methods: {
  handleClick(event) {
    console.log('按钮被点击', event);
  }
}

事件修饰符

Vue 提供修饰符简化事件处理逻辑：

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

示例：

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

按键修饰符

监听特定按键事件：

<input @keyup.enter="submit" />
<!-- 支持按键别名（如 .esc、.tab）或键码 -->
<input @keyup.13="submit" />

自定义事件

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

this.$emit('custom-event', data);

父组件监听：

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

事件传参

支持内联传参并保留原生事件对象：

<button @click="handleClick('参数', $event)">传参</button>

注意事项

• 避免在模板中直接写复杂逻辑，应调用方法。
• 组件自定义事件需通过 $emit 显式触发。
• 修饰符可串联使用，如 @click.stop.prevent。