前言

Vue 绑定事件处理函数

Vue内部不会直接执行 addCount(2) ，而是会在外头包一层不执行，类似这样：

function fn(num) {
  addCount(num);
}

最后当事件触发时，才调用这个 fn

@click="add"
function fn($event) {
  add($event);
}

@click="add(1)"
function fn(num) {
  add(num);
}

@click="add(1, $event)"
function fn(num, $event) {
  add(num, $event);
}

⭐️ $event

写在第几个参数位置，就在方法参数中第几个位置接收：

<button @click="removeTodo(index, $event)">删除</button>

removeTodo(index, event) {
  this.todoList.splice(index, 1);
  console.log(this.todoList, event);
}

<button @click="removeTodo($event, index)">删除</button>

removeTodo(event, index) {
  this.todoList.splice(index, 1);
  console.log(event, this.todoList);
}

⭐️ 多事件处理函数绑定