Question

如果一个函数绑定到多个Vue事件挂钩，有没有办法知道哪个事件触发了该函数？

这是一个人为的例子：

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

这也可以帮助理解Transition钩子的上下文并确定触发了哪些。

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

从handler内部，我们可以告诉哪个钩子是来电者吗？

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

Answer 1

事件对象type将告诉您哪个事件触发了处理程序。您可以使用$event variable：

在Vue中获取事件对象

＆＃13;

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'
})

＆＃13;

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

＆＃13;

调用哪个Vue处理程序？

1 个答案: