vue3阻止冒泡指令

在Vue3中，可以使用`.stop`指令来阻止事件冒泡。该指令可以直接在事件处理函数中使用，或者在模板中使用`@`符号绑定事件时使用。例如：

<div @click.stop="handleClick">
  <span>按钮1</span>
  <span>按钮2</span>
</div>

在上述代码中，当点击按钮1时，`handleClick`方法会被调用，而点击按钮2时，由于使用了`.stop`指令，事件不会继续向父级元素冒泡。

另外，Vue3还提供了其他修饰符来控制事件行为，如`.prevent`用于阻止事件的默认行为，`.self`用于只有自己触发的事件才会执行，`.capture`用于改变事件的传播机制为捕获模式，`.once`用于只执行一次事件，`.passive`用于提升移动端性能。这些修饰符可以根据具体需求进行使用。\[3\]
#### 引用[.reference_title]
- *1* *2* *3* [vue.js中实现阻止事件冒泡](https://blog.csdn.net/taoshihan/article/details/127464442)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]