Как прослушать все события из одного компонента в 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 предлагает взломать прослушивание всех событий здесь .Он также объясняет, что введение регулярного выражения или других способов прослушивания большего количества событий повлияет на производительность и, вероятно, не сделает этого.