这篇文章主要介绍“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元素，就不需要
<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>到此，关于“vue中@click和@click.native.prevent的区别是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
