检查组件是否附加了事件侦听器

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 的情况下实现这一目标？

原文由 Kasheftin 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Bert 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 Vue 3 中， $listeners 对象已被 移除。侦听器现在是 $attrs 对象的一部分，并 带有前缀 on 。

为了检查子组件中是否存在特定的侦听器，您可以执行以下操作：

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

子组件称为：

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

原文由 Prerak Sola 发布，翻译遵循 CC BY-SA 4.0 许可协议