Vue.js：檢查組件是否附有事件監聽器

Question

假設組件有一些<Form>組件。它可以通過附加的@cancel事件監聽器來調用，這種情況下，我想顯示觸發此事件的取消按鈕。如果沒有@cancel事件，取消按鈕應該不可見。

有沒有辦法來檢查組件是否有附加的事件監聽器？

目前我做的：

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

，並調用它是這樣的：

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

要麼

<Form/> 

是否有可能實現這一目標而無需使用類似cancelEventPassed任何附加屬性？

Answer 1

當監聽器連接到組件時，它們在組件的$listeners屬性中可用。

您可以使用該屬性來確定特定偵聽器是否可用。例如，這是一個計算屬性，用於檢查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>