1. 不传任何参数
<button @click="clickParams">点击</button> // 不传任何参数
// 函数
clickParams(params = '') {
console.log(params) // 此处的 params 是事件对象 Event,而非 ''
}
2. 只传自定义的参数,无需Event对象
<button @click="clickParams('click123')">点击</button> // 传一个参数
// 函数
clickParams(params = '') {
console.log(params) // 此处的 params 是'click123',而非事件对象 Event
}
3.同时传事件对象Event 和 自定义参数
// 只需把 $event 传进去即可,无需必为第一个参数,可作为任何位置的参数传进。
<button @click="clickParams($event, 'click123')">点击</button> // 传$event参数 和 自定义参数
// 函数
clickParams(params1 = '', params2 = '') {
console.log(params1, params2) // 此处的 params1 是Event对象,params2 是'click123'
}
易引起bug 的要点
开发时,在调用click函数没有传任何参数时,会错误地认为参数params是 undefined,或者使用es6的解构赋值时,会错误认为 params 是默认值。实际上,如果在调用 @click='xxx',不传参,那么 params 就一定是 Event 对象。