Vue: Modifier to propagate/forward events to parent

[Vontus]

What problem does this feature solve?

Currently, and as far as I know, if we want to propagate an event fired by a child component to the parent (the child's grandparent) we need to $emit the event again, and we need to pass all the arguments one more time. This can become a problem, for example, if the event has a variable number of arguments because we need to specify them manually or pass the whole array as a new argument.

The current way would be something like

@blur="$emit('blur')"
@create="$emit('create', arguments[0])"
@input="$emit('input', arguments[0], arguments[1])"

What does the proposed API look like?

@blur.propagate
@create.propagate
@input.propagate

And if we want to both handle the event and propagate it to the parent, we would use

@input.propagate="someFunction"

---

EDIT: Maybe since .propagate may be confused with the function .stopPropagation(), a better term could be simply .emit

[lopugit]

why not just @input="$emit('input', arguments)" ?

I do like having a dedicated keyword though

[Vontus]

@lopugit because passing the whole array in one argument would make users handle the same event differently in different components, plus it is a little redundant.

[lopugit]

Isn't propagating arguments upwards what you want??

On Wed., 16 Jan. 2019, 6:50 pm Vontus <[email protected] wrote:

@lopugit https://github.com/lopugit because passing the whole array in
one argument would make users handle the same event differently in
different components, plus it is a little redundant.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue/issues/9325#issuecomment-454683246, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AM_3BshACHBnU8nluMZLTLrOAGxiD6NEks5vDtmzgaJpZM4aAyIG
.

[laander]

You should be able to use the spread operator, ala:

@input="$emit('input', ...arguments)"

[Vontus]

@laander That solves the issue with the arguments, but I think a modifier to let Vue do it would be a nice addition.

I think this modifier can be specially useful for wrapper components that need to emit most events they receive from their child component.

[AlbertMarashi]

I think this would be a cool addition

[raisou]

+1

[AlbertMarashi]

@input="$emit('input', ...arguments)" works great, however @input.propagate would be an awesome addition

[lopugit]

nice!!! OPEN SOURCE FTW

[alecoscia]

That's also great for keeping the whole app more maintainable

[muodov]

I believe you can achieve this by adding v-on="$listeners" on a root element of the nested component?

[Vontus]

I believe you can achieve this by adding v-on="$listeners" on a root element of the nested component?

I didn't know that, thank you for the tip! The only problem I find is that you aren't able to select which events are being propagated to the parent, it just forwards every event from the nested component.

[muodov]

@Vontus you can! Just wrap $listeners with your own computed property that filters the keys