Question

Assuming there's some <Form> component. It can be called with a @cancel event listener attached to it and if it's the case, I want to show the cancel button that triggers this event. If there's no @cancel event, the cancel button should not be visible.

Is there a way to check if a component has event listener attached to it?

Currently I do:

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

And call it like this:

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

either

<Form/>

Is it possible to achieve this without using any additional property like cancelEventPassed?

Answer 1

如果有一个侦听器附加到组件，则它们在组件的$listeners属性中可用。

您可以使用该属性来确定特定侦听器是否可用。例如，这是一个计算属性，用于检查是否存在cancel侦听器。

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

以下是组件中使用的示例。

＆＃13;

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')
    }
  }
})

＆＃13;

<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>

＆＃13;

Answer 2

在 Vue 3 中，$listeners 对象一直是 removed。侦听器现在是 $attrs 对象的一部分，并且以 on 为前缀。

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

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

子组件被调用为：

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

Check if a component has an event listener attached to it

2 个答案: