Vue事件中获取原事件参数_vue事件源参数

以Click方法为例，如何知道Click方法原事件中含有哪些参数？

---

1. 一般用法，不传参数

<el-button @click="testClick">Click事件</el-button>

testClick(){
	console.log('Click事件触发了...')
}
1
2
3
4
5

这种情况下vue对事件的处理会自带一个event事件，可查 VUE API 文档。

<el-button @click="testClick">Click事件</el-button>

testClick(event){
	console.log('event')
}
1
2
3
4
5

---

2. 猜测默认参数，当你不知道默认配置几个方法时，可以先试试几个，如果有就继续往下尝试

<el-button @click="testClick">Click事件</el-button>

testClick1(a,b,c){
	console.log(a,b,c)
},
1
2
3
4
5

结果如下截图，click默认参数就一个，其他两个都是undefined，如果不是underfined可以继续加入参数去尝试。

---

3. 当我们在事件中传入自己的参数，比如想点击这行数据，传入行ID删除数据时，这时发现找不到了事件原生参数

<el-button @click="testClick(1)">Click事件</el-button>

testClick1(a,b,c){
	console.log(a,b,c)
},
1
2
3
4
5

结果如下截图，这里还是用了上面猜想参数的方法，可以看到找不到了事件原生参数了。

---

4. 在事件中编记原始参数 $event 即可在传自定义参数同时拿到原生事件参数

<el-button @click="testClick(1,$event)">Click事件</el-button>

testClick1(a,b,c){
	console.log(a,b,c)
},
1
2
3
4
5

结果如下截图：