在 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
事件只会触发一次,绑定后即自动移除。