Vue.js: vérifie si un composant a un écouteur d'événement connecté

Question

Supposons qu'il existe un composant <Form>. Il peut être appelé avec l'écouteur d'événement @cancel attaché, et dans ce cas je veux montrer le bouton d'annulation qui déclenche cet événement. S'il n'y a pas d'événement @cancel, le bouton d'annulation ne doit pas être visible.

Existe-t-il un moyen de vérifier si un composant est connecté à un écouteur d'événement?

Actuellement je fais:

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

et l'appeler comme ceci:

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

soit

<Form/> 

Est-il possible d'y parvenir sans utiliser la propriété supplémentaire comme cancelEventPassed?

Answer 1

Lorsque des écouteurs sont connectés à un composant, ils sont disponibles dans la propriété $listeners du composant.

Vous pouvez utiliser cette propriété pour déterminer si un écouteur spécifique est disponible. Par exemple, voici une propriété calculée qui vérifie l'existence d'un écouteur cancel.

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

Et voici un exemple de celui utilisé dans un composant.

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>