vue.js - 调用哪个 Vue 处理程序？

Question

如果一个函数绑定(bind)了多个 Vue 事件钩子(Hook)，有没有办法知道哪个事件触发了函数？

这是一个人为的例子:

<div v-on:click="handler" v-on:mouseover="handler">
    Which event called handler? Click or Mouseover?
</div>

这还可以帮助理解 Transition Hook 的上下文并确定触发了哪个 Hook 。

<transition appear v-on:appear="handler" v-on:enter="handler">

从 handler 内部，我们可以知道调用者是哪个钩子(Hook)吗？

针对这些情况的实际解决方法是在两个简单的包装函数后面装饰通用功能，但似乎 Vue 可能有一种理解其事件调用上下文的方法，这可能被忽略了。

Answer 1

事件对象的类型 会告诉您哪个事件触发了处理程序。您可以使用 $event variable 在 Vue 中获取事件对象:

Vue.component('demo', {
  template: '<div v-on:click="handler($event)" v-on:mouseover="handler($event)">Click or hover on me</div>',
  methods: {
    handler(e) {
      console.log(e.type); // e is the event object passed in as $event
    }
  }
});

new Vue({
  el: '#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<div id="app">
  <demo></demo>
</div>