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

问题描述

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

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>                                                                     

推荐答案

我认为 $listeners 可能正是您所需要的.它是一个包含所有父级侦听器的对象，它可以通过 v-on="$listeners" 转发给子级.

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>

演示

这篇关于如何在 VueJS 中侦听来自一个组件的所有事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！