Vue2/3 事件修饰符大全

在 Vue 中，事件修饰符是用于处理事件监听器的特殊行为的快捷方式。以下是 Vue 中所有的事件修饰符及其说明。

1. .stop

阻止事件冒泡，相当于调用 event.stopPropagation()。

示例：

<button @click.stop="handleClick">Click me</button>

2. .prevent

阻止默认行为，相当于调用 event.preventDefault()。

示例：

<form @submit.prevent="handleSubmit">Submit</form>

3. .capture

使用捕获模式监听事件，事件会在从祖先到目标的捕获阶段触发。

示例：

<button @click.capture="handleClick">Click me</button>

4. .self

只有事件发生在绑定的元素本身（不包括子元素）时，才会触发回调。

示例：

<div @click.self="handleClick">Click inside this div</div>

5. .once

事件只会触发一次，绑定后即自动移除。

示例：