Vue 3 - Prevent event propagation on custom event handlers

Question

If i have a custom event handler like @my-event and i emit it with

this.$emit('my-event')

it calls all the events of @my-event from all parent components. But i want to prevent this. On normal event handlers like @click , we can simply add .stop behind it to prevent this behaviour. But .stop does not work on custom event listeners.

Fiddle without stop: https://jsfiddle.net/xn9sq4cp/

Fiddle with stop: https://jsfiddle.net/xy18mspz/

I know i can add

inheritAttrs: false

to prevent event propagation globaly, but i dont want this.

So, how can i prevent event propagation for custom event handlers.

Thanks.

Answer 1

You can stop the component from emitting the event to stop it from being bubbled up by adding this:

// ...
emits: {
  'my-event': false
}
// ...

JS Fiddle