Vue events don't bubble the component tree on their own. However when writing wrapper components this can be the desired behaviour.
This code registers a global bubble
directive which allows to re-emit all given events:
Let's say we want to bubble events start
, accelerate
and brake
of our component Car
.
Without any help, we'd roughly have to do this:
<Car
@start="(...args) => $emit('start', ...args)"
@accelerate="(...args) => $emit('accelerate', ...args)"
@brake="(...args) => $emit('brake', ...args)"
/>
However with this directive, we can just do the following:
<Car v-bubble.start.accelerate.brake />
That's it! :)
I know there is not enough info here to troubleshoot : ) but I can not reproduce it in a pen ... So I wasn't really expecting any solutions. I just thought I mention it here in case anyone comes across similar issue. Thank you !