vue中@click和@click.native.prevent的区别
更新时间：2022年04月21日 11:33:13 作者：Z_Gleng
这篇文章主要介绍了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元素，就不需要
<template> <div id="app"> <Button @click.native = 'goToNext'>点击跳转</Button> </div> </template>
<script>
import Button from '../components/Button'
export default{
components:{
Button
},
data(){
return{
}
}
methods:{
goToNext(){
alert('hello--world')
}
}
}
</script>以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，下面这篇文章主要给大家介绍了关于vue.js简单配置axios的相关资料，需要的朋友们可以参考借鉴，需要的朋友们下面来一起学习学习吧。2017-12-12
这篇文章主要介绍在Vue中是如何封装axios的相关资料，axios的封装主要是帮助我们简化代码和利于后期的更新维护，感兴趣的小伙伴可以和小编一起来阅读下面文章的具体内容2021-10-10
这篇文章主要介绍了使用vue2实现购物车和地址选配功能,本文通过实例代码相结合的形式给大家介绍的非常详细，需要的朋友可以参考下2018-03-03
这篇文章主要给大家介绍了关于Vue3中watch用法与最佳实践的相关资料,watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法,可以通过watch动态改变关联的状态,需要的朋友可以参考下2021-07-07
这篇文章主要为大家详细介绍了vue实现伪3D切换滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
Vue中computed、methods与watch的区别总结
这篇文章主要给大家介绍了关于Vue中computed、methods与watch区别的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-04-04
这篇文章主要介绍了vue打印插件vue-print-nb的实现,需要引入插件npm install vue-print-nb --save，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要给大家介绍了关于Vue3中ref和reactive的基本使用及区别的相关资料,需要的朋友可以参考下2022-07-07
Vue.js 3.x 中的响应式数据ref 与 reactive详解
ref 和 reactive 是 Vue.js 3 中用于创建响应式数据的两个关键函数,它们分别适用于不同类型的数据,帮助我们更好地组织和管理组件的状态,这篇文章主要介绍了Vue.js 3.x 中的响应式数据：ref 与 reactive,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了vue项目中使用rem,在入口文件添加内容操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论