推荐答案
在 Vue 中，事件修饰符可以通过在事件绑定后添加修饰符来实现特定的行为。以下是常见的事件修饰符及其用法：
-- -------------------- ---- ------- ---- ------ --- ------- ------------------------------ -------------------- ---- ------ --- ----- -------------------------------------- -------------- ---- -------- --- ---- ------------------------------------ ----------- ---- --------------------- --- ---- ------------------------------ ----------- ---- -------- --- ------- ------------------------------ --------------
本题详细解读
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>
这些修饰符可以单独使用，也可以组合使用，以实现更复杂的事件处理逻辑。