千家信息网

vue中@click和@click.native.prevent的区别是什么

发表于:2024-09-30 作者:千家信息网编辑
千家信息网最后更新 2024年09月30日,这篇文章主要介绍"vue中@click和@click.native.prevent的区别是什么",在日常操作中,相信很多人在vue中@click和@click.native.prevent的区别是什么
千家信息网最后更新 2024年09月30日vue中@click和@click.native.prevent的区别是什么

这篇文章主要介绍"vue中@click和@click.native.prevent的区别是什么",在日常操作中,相信很多人在vue中@click和@click.native.prevent的区别是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答"vue中@click和@click.native.prevent的区别是什么"的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

@click和@click.native.prevent区别

@click是用在按钮上的语法糖

而@click.native是给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件

prevent是用来阻止默认的事件。就相当于…event.preventDefault(),父组件想在子组件上监听自己的click的话,需要加上native修饰符。

这里说说默认事件

默认事件就是默认执行的事件,比如 a标签,点击a标签,页面会自动跳转

@click.native中.native的含义与使用

vue当中的@click.native

.native--侦听组件根元素上的原生事件

作用:给组件绑定原生事件

@click是我们在vue开发中经常用到的事件绑定,而@实际上是 v-on 的简写,而 v-on 则是对 vue 的事件体系封装之后的 API接口

也就是说,在处理DOM原生事件的场合中需要添加额外的标识符

比如:如果使用router-link标签,加上@click事件,绑定的事件会无效,因为router-link的作用是单纯的路由跳转,会阻止click事件,如果不加 .native, 事件是不会触发的,因此需要加上 .native 才会触发事件

当你给一个vue组件绑定事件的时候,要加上native,如果是普通的html元素,就不需要

到此,关于"vue中@click和@click.native.prevent的区别是什么"的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注网站,小编会继续努力为大家带来更多实用的文章!

0