Vue 3: How to emit an event WITH parameters MULTIPLE levels up?

Note A: This might sound like a duplicate to some, but all the other questions I've found so far is either referring to Vue 2, or events with no parameters. Please correct me if I'm wrong.

Note B: This question might look like a feature-request, but it's not. I've just started using Vue and I don't know how to solve this problem properly.

My component is found two levels down from App.vue. It runs this code:

this.$emit('my-event', parameter);

App.vue (two levels up) catches the event with this code:

@my-event="myFunction"

But for the event to reach App.vue it first has to go through the component above itself, like this:

Child Component > Parent Component > App.vue

The parent component could catch the event and pass it on to App.vue like this:

@my-event="$emit('my-event')"

But then the parameter is left out.

Another way of solving it would be (inside the parent component):

@my-event="myEvent"

myEvent(parameter) {
  this.$emit('my-event', parameter);
}

But I'm looking for a simpler and more intuitive way of passing up the event. Perhaps something like this (inside the parent component):

@my-event="$emit('my-event', parameter)"

Is this possible in Vue 3? Or something similar to this? What is the best way of emitting an event with parameters multiple levels up? Any help would be greatly appreciated.

Solution 1:

Vue provides a special variable named $event that you can use inside the template to get hold of the event argument. So in your case you can write the event handler as

@my-event="$emit('my-event',$event)