Is it possible to pass an event to a parent coming from a child in Vue 3

user_330867 0
Viewed 983

I have many components that include others, and a deep component needs to send an event to a higher one. That component will $emit('eventName', some, properties)

The component's parent will have in the template, something along

<child-component @event-name="handleEvent" />
// ...
methods: {
    handleEvent ($event, some, properties) {
        this.$emit('eventName', some, properties)
    }
}

This seems tedious.

I was hoping there is a way the template could pass the even without touching it?

Ideally, this would work out of the box :

<component-child @event-name="$emit" />

But it's not because $emit can't guess the name of the event.

So, I tried the following:

<component-child @event-name="$emit('eventName', ...parameters)" />

But every time this event is emitted (like if there are 4 nested components that do that), the parameters increase by one every time, adding the $event of the current event.

How can I $emit an event to a parent in an elegant way by keeping the arguments in the proper place?

vuejs3 events
1 Answers

Here's my best suggestion so far, happy to have a better one:

<child-component @event-name="(some, properties) => $emit('eventName', some, properties)" />

That's better to read.

user_3308670
Related