vue @click 传参易引起的bug

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 对象。