source

VueJ의 1개의 컴포넌트에서 모든 이벤트를 어떻게 듣습니까?

nicesource 2022. 11. 15. 21:37
반응형

VueJ의 1개의 컴포넌트에서 모든 이벤트를 어떻게 듣습니까?

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>                                                                     

당신에게 필요한 건 그게 아닐까 싶어요.이것은 모든 부모 리스너를 포함하는 오브젝트로, 다음 명령어를 사용하여 자녀에게 전송할 수 있습니다.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>

데모

이것을 실현하는 표준적인 방법은 없습니다.

Vuejs의 저자는 이곳의 모든 사건에 대한 해답을 제공한다.또한 regexp 또는 더 많은 이벤트를 듣기 위한 다른 방법을 도입하면 퍼포먼스에 영향을 미쳐 아마 그렇게 하지 않을 것이라고 설명합니다.

언급URL : https://stackoverflow.com/questions/55199485/how-listen-to-all-events-from-one-component-in-vuejs

반응형