Opt-in events bubbling

[brendomaciel]

What problem does this feature solve?

None. It would only be a syntax sugar.

Sometimes we need to reemit events that are coming from a child component all the way up to a parent component where the event will be in fact handled. Depending on the situation, Vuex/Pinia may not be suitable.

For example:

// ComponentA.vue
<script setup>
  defineEmits(['custom-event']);
</script>

<template>
  <div>
    <button @click="$emit('custom-event', 'some-value')">
      Click me
    </button>
    
    <slot />
  <div>
</template>

// ComponentB.vue
<template>
  <ComponentA>
    <button>
      Click me too
    </button>
  </ComponentA>
</template>

// ComponentC.vue
<template>
  <ComponentB @custom-event="customEventHandler" />
</template>

It would work as expected because Vue bubbles events by default. But there's a gotcha. Vue only does that if there is no explicit declared event with the same name on the component.

It stops working when we need to emit the same event in the ComponentB, like this:

// ComponentB.vue
<script setup>
  defineEmits(['custom-event']);
</script>

<template>
  <ComponentA>
    <button @click="$emit('custom-event', 'different-value')"> <!-- The reason -->
      Click me too
    </button>
  </ComponentA>
</template>

So, we need to do this:

// ComponentB.vue
<script setup>
  defineEmits(['custom-event']);
</script>

<template>
  <ComponentA @custom-event="$emit('custom-event', $event)">
    <button @click="$emit('custom-event', 'different-value')">
      Click me too
    </button>
  </ComponentA>
</template>

Doing something like this is not the end of the world, but at least for me it looks like unnecessary code. And can get worst if there are two or more reemits.

What does the proposed API look like?

At first I thought a general option in the app config would be sufficient, but it wouldn't be much flexible. So, instead I thought of this:

// Parent.vue
<script setup>
  defineEmits({ 'custom-event': { bubble: true } });
</script>

<template>
  <ComponentA>
    <button @click="$emit('custom-event', 'different-value')">
      Click me too
    </button>
  </ComponentA>
</template>

[posva]

If I recall correctly, this bubbling behavior was intentionally removed in past versions of Vue

[brendomaciel]

Couldn't find anything about it. I actually found some questions of how to implement this behavior in Vue 2, from almost 7y ago.

AFAIK, the behavior of bubbling events (that aren't redefined along the way) was introduced in Vue 3, since $listeners are now part of $attrs.

So, I guess you're saying all events, even the redefined ones, were bubbling up in early stages of Vue 3?

Anyway, what I'm suggestion is an opt-in flag. I'm not suggesting make it the default behavior.

[posva]

I think it was in Vue 1 or Vue 2 that this behavior was removed.

[posva]

Or maybe I'm confusing it with the removal of $broadcast and $dispatch: https://v2.vuejs.org/v2/guide/migration#dispatch-and-broadcast-replaced

What I'm trying to say is that it's unlikely for a feature that was removed in a major version to be added back

[brendomaciel]

I see. There are similarities. But it's not quite the same thing.

If I understood it correctly, the main problem with the removed approach is the lack of explicitness. What I purposed don't have this problem as everything is explicit.

Also, I'm not trying to push a new feature. It's already there, only not covering every scenario. So, what I'm trying to do make it more flexible.

[brendomaciel]

Just edited the proposal with the term "bubble" instead, since it's the most common term.

[jods4]

It would work as expected because Vue bubbles events by default. But there's a gotcha. Vue only does that if there is no explicit declared event with the same name on the component.

I don't think the event actually bubbles, isn't it more that undeclared event handlers are inherited in the same way that attrs are?
The end result is kind of similar but what's actually happening is very different.
It matters if we then discuss extended APIs to continue/stop bubbling at various levels.

As an alternative when I need bubbling, I use native HTML events.
The key difference between native (events, context injection) and Vue is that the component trees are different.
Vue components may not always map 1:1 to a single HTML tag, so sometimes it doesn't work well.

[brendomaciel]

I don't think the event actually bubbles, isn't it more that undeclared event handlers are inherited in the same way that attrs are?
The end result is kind of similar but what's actually happening is very different.

Yeah, you're right. It's not like they're trying to implement the bubble effect. It's kind of a side effect. Maybe I should change the term in the proposal again to something else.

Still, what I'm trying to control is this, as they call it in the Vue docs, "consumption" behavior:

Forwarded attributes do not include any attributes that are declared as props, or v-on listeners of declared events by <MyButton> - in other words, the declared props and listeners have been "consumed" by <MyButton>.

[gianj988]

Hi everybody.

I landed here to find a solution to this problem and the original post idea inspired me to build a simple plugin that simulates the DOM event bubbling and, at the same time, keeping things separated from Vue core event system.
It works as plugin and directive, both to install as any other vue plugins and directives.
StopPropagation and Once are also implemented as raw values or functions.
If you want to check, the NPM page is https://www.npmjs.com/package/vue-events-backbone. Documentation is on the page.