vue｜特殊变量 $event

解释

在 vue 项目中，编写 html 有两种方案，一是类似 react 的 jsx，二是 vue 自带的模版语法。模版语法很方便，是 vue 项目首选的编写 HTML 方案
而在模版语法中，$event是一个承载事件的特殊变量，也就是说它和原生的 DOM 事件对象一致，$event 就是 DOM 事件对象
$event 出现目的是为了有时候不那么方便放入事件时（比如你需要多个参数，但往往绑定事件只能接受一个参数），你可以在模版语法中使用它代替事件对象

例子

<button v-on:click="(e)=>warn1('Form cannot be submitted yet.')(e)"> // 这里只能处理原生事件对象，而不能传入其他参数
  Submit
</button>

<button v-on:click="warn2('Form cannot be submitted yet.', $event)"> // $event 这个特殊变量就是原生事件对象，这样你可以传入更多的参数了
  Submit
</button>

// ...
methods: {
  warn1: function (msg) {
    // 往往为了获得原生事件对象，我们的函数只能接受一个函数。否则，只能想办法用其他方式处理，比如返回一个处理事件的函数
    return (e)=>this.warn2(msg, e)
  }
  warn2: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}