vue
vue copied to clipboard
vuejs
Modifier to propagate/forward events to parent
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
why not just @input="$emit('input', arguments)" ?
I do like having a dedicated keyword though
@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.
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 .
You should be able to use the spread operator, ala:
@input="$emit('input', ...arguments)"
@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.
@input="$emit('input', ...arguments)" works great, however @input.propagate would be an awesome addition
I believe you can achieve this by adding v-on="$listeners" on a root element of the nested component?
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.
@Vontus you can! Just wrap $listeners with your own computed property that filters the keys
I posted the same request back in 2018 for a bubble modifier, but it was rejected as syntax sugar: https://github.com/vuejs/vue/issues/7965
In Svelte you can just do <button on:click> to forward the event, so it would be really nice if you could just do
<button @click> in Vue (or at least had a modifier).
It seems like $listeners was removed in Vue 3. What's the recommended way for building a transparent wrapping component now?
@bryanmylee Listeners are now in $attrs, and they begin with on (e.g., onClick).
