Vue事件中如何获取原事件参数
作者：-小龙人
文章介绍了如何在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)
},
结果如下截图：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。