• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

501
Views
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.

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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)
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error