Vue.js: Überprüfen Sie, ob eine Komponente einen Ereignis-Listener hat

Question

Angenommen, es gibt einige Komponente. Es kann mit @cancel Event-Listener angeschlossen werden, und in diesem Fall möchte ich die Schaltfläche zum Abbrechen zeigen, die dieses Ereignis auslöst. Wenn es kein @cancel Ereignis gibt, sollte die Abbrechen-Schaltfläche nicht sichtbar sein.

Gibt es eine Möglichkeit zu überprüfen, ob eine Komponente einen Ereignis-Listener hat?

Derzeit tun I:

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

Und es so nennen:

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

entweder

<Form/> 

Ist es möglich, dies zu erreichen, ohne zusätzliche Eigenschaft wie cancelEventPassed mit?

Answer 1

Wenn Listener an eine Komponente angehängt sind, sind sie in der Eigenschaft $listeners der Komponente verfügbar.

Sie können diese Eigenschaft verwenden, um zu bestimmen, ob ein bestimmter Listener verfügbar ist. Zum Beispiel ist hier eine berechnete Eigenschaft, die nach der Existenz eines cancel Listeners sucht.

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

Und hier ist ein Beispiel für das in einer Komponente verwendet.

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>