在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
或@
监听组件发出的自定义事件,而不是直接监听原生事件。