How to handle specific events and pass the rest to v-on:$listeners?

I have my components structure as App.vueWrapper.vueComponent.vue. Wrapper.vue would like to use Component.vue in this way:

<component @msg="handleMsg" v-on="$listeners">

with the intention that msg event would not propagate to App.vue. This is not possible as wrapper will bubble up all message regardless. How can I achieve this ?

You can intercept the listeners.

I’ve only ever done this when I wanted to extend listeners or remap handlers, but in theory I’d think this should work…

<template>
  <component @msg="handleMsg" v-on="events">
</template>
created () {
    this.events = {
      ...this.$listeners
    };
    
    delete this.events.msg
  },
1 Like