如何在 VueJS 中侦听来自一个组件的所有事件？

Question

Vue 中是否有可能以与此类似的方式处理一个函数内的传入事件？

<template>         
    <component v-on="eventsDistributor(eventName, $event)"/>                                                                 
</template>                                                                   
<script>                                                                      
export default {                                                                      
  props: {
      handlers: Object,
  },
  methods : {                                                                 
      eventsDistributor (name, $event) {                            
          let handler = this.handlers[name]
          if (handler) return handler($event)
      }                                                                       
  }                                                                           
}                                                                             
</script>                                                                     

Answer 1

我想$listeners可能是你需要的。它是一个包含所有父级侦听器的对象，并且可以通过v-on="$listeners".

例如，您有一个<button>包装器组件，并且希望包装器上的所有侦听器都绑定到按钮：

<!-- MyButtonWrapper.vue -->
<template>
  <button v-on="$listeners">Click</button>
</template>

<!-- Parent.vue -->
<template>
  <!-- click and mouseover listeners are bound to inner button -->
  <MyButtonWrapper @click="onClick" @mouseover="@mouseover" />
</template>

演示

Answer 2

没有标准方法可以实现这一目标。

vuejs 的作者在这里提供了一个监听所有事件的 hack 。他还解释说，引入正则表达式或其他监听更多事件的方法会对性能产生影响，但可能不会产生影响。