假设有一些 <Form> 组件。可以使用附加的@cancel 事件侦听器来调用它，如果是这种情况，我想显示触发此事件的取消按钮。如果没有@cancel 事件，取消按钮应该是不可见的。
有没有办法检查组件是否附加了事件监听器？
目前我这样做：
<template>
<form>
<button v-if="cancelEventPassed" @click="$emit('cancel')">Cancel</button>
</form>
</template>
然后这样称呼它：
<Form :cancelEventPassed="true" @cancel="handle_cancel" />
要么
<Form/>
是否可以在不使用任何其他属性（如cancelEventPassed）的情况下实现这一目标？
【问题讨论】：
标签： javascript vue.js vuejs2 vue-component
当有侦听器附加到组件时，它们在组件的$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>【讨论】：
$listeners['my-event']。 Vue 3 通过 providing automatic case transformation for event names 对此进行了对比（您始终可以将点表示法与 camelCase 名称一起使用）。
this._events 将包含所有附加事件。
在 Vue 3 中，$listeners 对象一直是 removed。侦听器现在是$attrs 对象的一部分，并且以on 为前缀。
为了检查子组件中是否存在特定的侦听器，您可以这样做：
computed: {
hasCancelListener() : boolean {
return (this.$attrs && this.$attrs.onCancel) as boolean
}
}
子组件调用为：
<custom-form @cancel="onCancel"></custom-form>
【讨论】：
emits 属性中定义自定义事件，这将不起作用，例如如果您的组件上存在emits: ['click']，$attrs.onClick 将是未定义的。这有点麻烦，因为这意味着您似乎无法检查自定义事件是否存在侦听器。
您可以像这样检查侦听器是否存在：
this._events['listener-name']
【讨论】：