vue实现事件绑定

Vue 事件绑定实现方法

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

基础语法

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

方法定义

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

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

内联处理器

可直接在模板中调用方法并传递参数：

<button @click="handleSubmit('参数', $event)">提交</button>

methods: {
  handleSubmit(arg, event) {
    console.log(arg, event);
  }
}

事件修饰符

Vue 提供的事件修饰符：

<!-- 阻止默认行为 -->
<form @submit.prevent="onSubmit"></form>

<!-- 停止事件冒泡 -->
<div @click.stop="doThis"></div>

<!-- 事件只触发一次 -->
<button @click.once="doOnce"></button>

<!-- 按键修饰符 -->
<input @keyup.enter="submit" />

自定义事件

子组件触发父组件事件：

<!-- 子组件 -->
<button @click="$emit('custom-event', payload)">触发</button>

<!-- 父组件 -->
<child-component @custom-event="handleCustomEvent" />

原生事件绑定组件

在组件上监听原生事件需要添加 .native 修饰符（Vue 2）：

<my-component @click.native="handleClick"></my-component>

Vue 3 中已移除 .native，需使用 emits 选项显式声明。

多事件处理器

一个事件可绑定多个方法：

<button @click="method1(), method2()">多事件</button>