구성 요소에 이벤트 수신기가 연결되어 있는지 확인하십시오.

구성 요소에 이벤트 수신기가 연결되어 있는지 확인하십시오.

어떤 것이 있다고 가정하면.<Form>구성 요소라고 부를 수 있다.@cancel거기에 첨부된 이벤트 수신기 그리고 만약 그렇다면 나는 이 이벤트를 트리거하는 취소 버튼을 보여주고 싶다.없으면@cancel이벤트, 취소 버튼이 보이지 않아야 한다.

구성 요소에 이벤트 수신기가 연결되어 있는지 확인할 수 있는 방법이 있는가?

현재 실행 중인 작업:

<template>
  <form>
    <button v-if="cancelEventPassed" @click="$emit('cancel')">Cancel</button>
  </form>
</template>

그리고 이렇게 부른다.

<Form :cancelEventPassed="true" @cancel="handle_cancel" />

어느 쪽이든

<Form/>

다음과 같은 추가 속성을 사용하지 않고도 이를 달성할 수 있는가?cancelEventPassed?

구성 요소에 수신기가 부착된 경우 에서 수신기를 사용할 수 있다.$listeners구성 요소의 속성

이 속성을 사용하여 특정 수신기를 사용할 수 있는지 확인하십시오.예를 들어, 여기에 a의 존재를 확인하는 계산된 속성이 있다.cancel경청하는 사람

computed:{
  hasCancelListener(){
    return this.$listeners && this.$listeners.cancel
  }
}

그리고 여기 구성 요소에 사용된 예시가 있다.

console.clear()

Vue.component("CustomForm", {
  template:`
    <div>
      <h1>Custom Form</h1>
      <button v-if="hasCancelListener" @click="$emit('cancel')">I have a listener!</button>
    </div>
  `,
  computed:{
    hasCancelListener(){
      return this.$listeners && this.$listeners.cancel
    }
  },
})

new Vue({
  el: "#app",
  methods:{
    onCancel(){
      alert('canceled')
    }
  }
})

<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="app">
  <custom-form @cancel="onCancel"></custom-form>
  <hr>
  <custom-form></custom-form>
</div>

Vue 3에서는$listeners물체가 제거됨듣는 사람도 이제 한몫 끼게 되었다.$attrs목적어 앞에 …이 붙다

특정 수신기가 하위 구성 요소에 있는지 여부를 확인하려면 다음을 수행하십시오.

computed: {
  hasCancelListener() : boolean {
    return (this.$attrs && this.$attrs.onCancel) as boolean
  }
}

하위 구성요소를 다음과 같이 부른다.

<custom-form @cancel="onCancel"></custom-form>

수신기가 다음과 같이 존재하는지 확인할 수 있다.this._events['listener-name']

참조URL: https://stackoverflow.com/questions/46706737/check-if-a-component-has-an-event-listener-attached-to-it