您的位置:首页 > 文旅 > 旅游 > Vue中的事件修饰符?

Vue中的事件修饰符?

2024/10/14 3:36:24 来源:https://blog.csdn.net/FENGZXCjjjjj/article/details/140586148  浏览:    关键词: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@监听组件发出的自定义事件,而不是直接监听原生事件。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com