How listen to all events from one component in VueJS?

Question

Is there a possibility in Vue to deal with incoming events inside one function in a way similar to this?

<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

I think $listeners might be what you need. It's an object that contains all parent listeners, and it could be forwarded to children with v-on="$listeners".

For example, you have a <button> wrapper component, and you want any listeners on the wrapper to be bound to the 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>

demo

Answer 2

There is no standard way of achieving this.

The author of vuejs offers a hack to listen on all events here. He also explains that introducing regexp or other means of listening to more events will have a performance impact and will probably not do it.