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: 
In Vue 3, the `$listeners` object has been [removed](https://v3-migration.vuejs.org/breaking-changes/listeners-removed.html#overview). The listeners are now part of the `$attrs` object and **are prefixed with `on`**.

In order to check if a particular listener is present or not in a child component, you can do:

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

```

The child component is called as:

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

```
You can check if listener exists like that:
`this._events['listener-name']`