Vue 提供了多个事件修饰符，用于在处理 DOM 事件时进行特定的修饰。以下是 Vue 3 中常用的三个事件修饰符：

1：.stop 修饰符：

阻止事件冒泡。当事件触发时，.stop 修饰符可以阻止事件进一步传播到父元素。

<!-- 点击子元素时，不会触发父元素的点击事件处理函数 -->
<div @click.stop="handleParentClick"><button @click="handleChildClick">Click me</button>
</div>

2：.prevent 修饰符：

阻止默认事件。当事件触发时，.prevent 修饰符可以阻止元素执行默认的事件行为。

<!-- 点击链接时，不会跳转到链接的 URL -->
<a href="https://example.com" @click.prevent="handleClick">Click me</a>

3：.capture 修饰符：

使用事件捕获模式。默认情况下，Vue 使用事件冒泡模式处理事件，即从内部元素向外部元素传播。.capture 修饰符可以将事件处理改为捕获模式，即从外部元素向内部元素传播。

<!-- 在捕获阶段触发事件处理函数 -->
<div @click.capture="handleClick"><button>Click me</button>
</div>

这些事件修饰符可以与 @ 符号一起使用，用于绑定事件处理函数。

它们提供了一种简洁和语义化的方式来处理事件的传播和默认行为，使代码更加清晰和易于理解。

除了上述三个常用的事件修饰符外，Vue 还提供了其他一些修饰符，如 .self、.once、.passive 等，用于处理更多的事件场景。