Vue中事件修饰符有哪些，有什么用，怎么用?_事件修饰符有哪些,各自的功能是什么-CSDN博客

本文链接：https://blog.csdn.net/weixin_62160709/article/details/138544958

Vue中事件修饰符有哪些，有什么用，怎么用?

1、.stop
用途：阻止事件冒泡。当事件在 DOM 中传递时，它首先会在触发它的元素上触发，然后会冒泡到父元素，并可能继续向上冒泡。.stop 修饰符可以阻止这种冒泡行为。
用法：<button @click.stop=“handleClick”>点击我
2、.prevent
用途：阻止事件的默认行为。例如，在表单提交时，浏览器默认会重新加载页面。.prevent 修饰符可以阻止这种默认行为。
用法：<form @submit.prevent=“handleSubmit”>…
3、.capture
用途：使用事件捕获模式。在默认情况下，事件使用冒泡模式传播，但 .capture 修饰符可以使事件在捕获阶段触发，而不是在冒泡阶段。
用法：<div @click.capture=“handleDivClick”>…

4、.self
用途：只有当事件是直接从触发它的元素上触发时，才会触发事件监听器。这可以防止事件冒泡导致的误触发。
用法：<div @click.self=“handleDivClick”>…
5、.once
用途：事件监听器只触发一次，之后就会移除。
用法：<button @click.once=“handleClick”>点击我（只触发一次）
6、键盘修饰符
用途：监听特定键盘按键的事件。Vue 为常见的键盘按键提供了别名，如 .enter、.tab、.delete 等。
用法：<input @keyup.enter=“handleEnter”>
7、系统修饰键
用途：监听带有系统修饰键（如 ctrl、shift、alt、meta）的事件。
用法：<button @click.ctrl=“handleCtrlClick”>Ctrl + 点击我
8、.passive
用途：用于标记事件处理函数为“passive”，即告诉浏览器该监听器不会调用 event.preventDefault()。这可以提高滚动和触摸事件的性能。
注意：在 Vue 2.x 中，.passive 修饰符并不直接支持，但你可以通过其他方式（如原生 JavaScript 或其他库）来设置。在 Vue 3 中，这个修饰符可能得到支持，但具体取决于 Vue 3 的实现。
9、自定义修饰符
Vue 允许你注册自定义的事件修饰符。这可以通过全局 Vue.config.keyCodes 对象或组件级别的 keyCodes 选项来实现。
示例：在全局级别注册一个 .esc 修饰符来监听 Escape 键的按下事件。
请注意，不是所有的事件修饰符都适用于所有类型的事件或所有浏览器。在使用时，请确保你的代码与你的目标浏览器兼容。