Vue 中如何使用事件修饰符 (如：.stop, .prevent, .capture, .self, .once)？

推荐答案

在 Vue 中，事件修饰符可以通过在事件绑定后添加修饰符来实现特定的行为。以下是常见的事件修饰符及其用法：

// www.javascriptcn.com code example
<!-- 阻止事件冒泡 -->
<button @click.stop="handleClick">Stop Propagation</button>

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

<!-- 使用事件捕获模式 -->
<div @click.capture="handleClick">Capture Event</div>

<!-- 只有当事件是从触发元素自身触发时才触发回调 -->
<div @click.self="handleClick">Self Event</div>

<!-- 事件只会触发一次 -->
<button @click.once="handleClick">Once Event</button>

本题详细解读

1. .stop 修饰符

.stop 修饰符用于阻止事件冒泡。默认情况下，事件会从触发元素向上冒泡到父元素。使用 .stop 修饰符可以阻止事件继续向上传播。

<button @click.stop="handleClick">Stop Propagation</button>

2. .prevent 修饰符

.prevent 修饰符用于阻止事件的默认行为。例如，表单提交时会刷新页面，使用 .prevent 可以阻止表单提交的默认行为。

<form @submit.prevent="handleSubmit">Prevent Default</form>

3. .capture 修饰符

.capture 修饰符用于在事件捕获阶段处理事件。默认情况下，事件处理是在冒泡阶段执行的，使用 .capture 可以让事件在捕获阶段就被处理。

<div @click.capture="handleClick">Capture Event</div>

4. .self 修饰符

.self 修饰符用于确保事件是从触发元素自身触发时才执行回调。如果事件是从子元素冒泡上来的，则不会触发回调。

<div @click.self="handleClick">Self Event</div>

5. .once 修饰符

.once 修饰符用于确保事件只会触发一次。触发一次后，事件监听器会被自动移除。

<button @click.once="handleClick">Once Event</button>

这些修饰符可以单独使用，也可以组合使用，以实现更复杂的事件处理逻辑。