Vue中的事件修饰符？

在Vue.js中，事件修饰符提供了一种简洁的方式来处理DOM事件中的常见问题，如阻止事件冒泡、阻止默认行为等。Vue的事件修饰符以.开头，可以串联使用多个修饰符。以下是一些常用的事件修饰符：

1.stop: 阻止事件冒泡。等同于在原生事件监听器中调用event.stopPropagation()。

vue<button @click.stop="doSomething">点击我</button>

2.prevent: 阻止事件的默认行为。等同于在原生事件监听器中调用event.preventDefault()。常用于阻止表单的默认提交行为。

vue<form @submit.prevent="onSubmit">
<!-- 表单内容 -->
</form>

3.capture: 使用事件捕获模式监听事件。等同于在原生事件监听器中设置addEventListener的第三个参数为true。

vue<div @click.capture="outerClick">
<button @click="innerClick">点击我</button>
</div>

4.self: 只当事件是从元素本身触发时才触发回调函数。常用于避免事件冒泡导致的意外触发。

vue<div @click.self="outerClick">
<button @click="innerClick">点击我</button>
</div>

5.once: 事件只触发一次，之后移除监听器。等同于在原生事件监听器中设置{ once: true }。

vue<button @click.once="doThisOnce">点击我</button>

6.passive: 以 { passive: true } 模式调用 addEventListener。它告诉浏览器你不打算在事件处理程序中调用 preventDefault()。这可以提高页面滚动的性能。

vue<div @scroll.passive="onScroll">...</div>

注意：.passive 修饰符尤其能够提升移动端的性能。

7.native: 在组件根元素上监听原生事件。由于组件是Vue的抽象，因此通常不建议直接在组件上监听原生事件，但有时候这是有必要的。

vue<my-component @click.native="handleClick"></my-component>

在Vue 3中，事件修饰符的使用方式与Vue 2类似，但需要注意的是，Vue 3的@click.native修饰符在组件上使用可能会有所不同，因为Vue 3引入了v-model和其他特性的更新，这可能会改变组件的DOM结构或事件监听方式。在Vue 3中，通常建议通过v-on或@监听组件发出的自定义事件，而不是直接监听原生事件。

原文地址：https://blog.csdn.net/FENGZXCjjjjj/article/details/140586148

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！