Vue事件中如何获取原事件参数
更新时间：2024年12月26日 09:09:58 作者：-小龙人
文章介绍了如何在Vue中通过Click方法获取原事件的参数,包括默认参数、自定义参数以及如何同时获取原生事件和自定义参数的方法
Vue事件中获取原事件参数
以Click方法为例，如何知道Click方法原事件中含有哪些参数？
1. 一般用法，不传参数
<el-button @click="testClick">Click事件</el-button>
testClick(){
console.log('Click事件触发了...')
}
这种情况下vue对事件的处理会自带一个event事件，可查 VUE API 文档。
<el-button @click="testClick">Click事件</el-button>
testClick(event){
console.log('event')
}
2. 猜测默认参数
当你不知道默认配置几个方法时，可以先试试几个，如果有就继续往下尝试
<el-button @click="testClick">Click事件</el-button>
testClick1(a,b,c){
console.log(a,b,c)
},
结果如下截图：
click默认参数就一个，其他两个都是undefined，如果不是underfined可以继续加入参数去尝试。
3. 当我们在事件中传入自己的参数
比如想点击这行数据，传入行ID删除数据时，这时发现找不到了事件原生参数
<el-button @click="testClick(1)">Click事件</el-button>
testClick1(a,b,c){
console.log(a,b,c)
},
结果如下截图：
这里还是用了上面猜想参数的方法，可以看到找不到了事件原生参数了。
4. 在事件中编记原始参数
$event 即可在传自定义参数同时拿到原生事件参数
<el-button @click="testClick(1,$event)">Click事件</el-button>
testClick1(a,b,c){
console.log(a,b,c)
},
结果如下截图：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue2.0 watch里面的 deep和immediate用法说明
这篇文章主要介绍了vue2.0 watch里面的 deep和immediate用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
Vue.js是一款流行的前端框架,它的路由管理器Vue Router是实现单页面应用功能的重要组成部分,在构建SPA的过程中,我们经常需要在不同的路由之间传递参数,Vue Router提供了两种主要的参数传递方式query和params,下面将详细介绍这两种方法的避坑指南2025-07-07
这篇文章主要介绍了Vue组件之单向数据流的解决方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了Vue3组件间的通信方式，在使用vue时，我们经常会把不同的模块拆分成不同的组件，而组件之间有的需要传递数据，所以组件间的数据通信就非常重要了2023-04-04
这篇文章主要介绍了Vue之vue.$set()方法源码案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
vue+vuex+json-seiver实现数据展示+分页功能
这篇文章主要介绍了vue+vuex+json-seiver实现数据展示+分页功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue之计算属性的缓存computed的用法解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-11-11
Ant Design Vue全局对话确认框(confirm)的回调不触发
这篇文章主要介绍了Ant Design Vue全局对话确认框(confirm)的回调不触发问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
electron-vue 项目添加启动loading动画的实现思路
electron-vue脚手架搭建的项目，在开发阶段可能你注意不到项目启动慢的问题，但是在build 生成的exe可执行文件，启动后，要反应很久才能进入到app.vue 中加载的页面，体验性很差，本文给大家介绍electron vue启动动画效果的实例代码，感兴趣的朋友一起看看吧2022-01-01
这篇文章主要介绍了vue中的input框点击后不聚焦问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论