How to catch a child's $emit in the parent with Vue?

What version of Vue are you using? I think the event system changed quite a lot in 2.0.

If you're using Vue 1.*, read the docs here: http://v1.vuejs.org/guide/components.html#Parent-Child-Communication

You should use $dispatch() to send events up the chain and then catch them in a events option on the parent.

I want to start using version Vue.js v.2.

So I read the docs here: http://vuejs.org/guide/components.html#Using-v-on-with-Custom-Events

But the example they give to catch an emission is in the HTML: <child v-on:increment="incrementTotal">.

However, I cannot seem to find out how to capture the ID I want to send alongside my child emission to the parent. So instead of solving your event capture in the HTML, isn't there any way to capture in the main Vue Object's options?

You can send it as an argument in the $emit method: http://vuejs.org/api/#vm-emit

this.$emit(msg, [popout.item.id]);

Dear @zachleigh Thank you, this is exactly what I've done for emitting it, but the problem is I don't know how to capture it properly, together with my item ID in my main Vue instance. Do you know how to capture this event on the top level vue root and do something with it?

You need an events option on your Vue instance:

    events: {
        eventName: function (argument) {
            // logic
        },
    },

Hi @mesqueeb, have you fixed this issue? I'm struggling something very similar. events methods was removed and Vuejs 2.

According to this http://vuejs.org/guide/components.html#Non-Parent-Child-Communication we should use $emit and $on to send and listen the event. I have tried but it didn't work as expected.

Any thoughts?

I use events. So dispatch the data and capture with event as noted above.

You can also set a prop as two way. Meaning the data passed in to a child will be synced to the parent on change.

This is how you use events in Vue2

https://github.com/gocanto/google-autocomplete/blob/master/src/js/Components/googleAutocomplete.vue

For it, you will have to use vuex

Check rhe store file referenced in that file

Hi, I just figured out! Firstly, just to ansewer @jekinney events/dispatch/broadcast was replaced by $emit and $on on Vuejs 2 as follows http://vuejs.org/guide/migration.html#dispatch-and-broadcast-replaced. @gocanto vuex e more for complexity approach and yes, it is more indicated uso. However, for very simple approach doesn't make much sense.

So, back to Vuejs 2, $emit and $on are used for the same component, not between them. See this http://vuejs.org/guide/components.html#Non-Parent-Child-Communication

To use $emit and $on for different component you should listen the event by v-on. as following http://vuejs.org/guide/components.html#Using-v-on-with-Custom-Events

To pass data through $emit you just need to use vm.$emit('eventName', arg) in the child component and then use someMethod(arg) {} in the parent component.

Have a look at this example I've done: https://jsfiddle.net/tiagomatosweb/vqtnpyzw/

Hope I've helped!

what about parent to child?

The "Hub" which uses a Vue instance as an event hub is the only way?

@Shig To send data from parent to child you should use Props. Have a read at this page http://vuejs.org/guide/components.html#Passing-Data-with-Props

The hub is for smaller application, but for others is beter use vuex

Totally agree @gocanto

want to thank @tiagomatosweb for the jsfiddle example! Couldn't find a way to understand this intricate system of multiple functions calling each other, and with you example I found it out! Big thank!

Is it possible to emit an event from a child of a child (multiple component layers below) to call a method on the main vue instance?

Hey, if the components are parent/child you should use $emit to emit the data and v-on to catch the data. Even if you have child of a child i think it is advised to use this methodology.

In you scenario, you would use $emit from the second child, catch the data in the first child using v-on. After that, you would $emit again from the first child and finally catch it using v-on in the parent component.

If the components aren't parent/child you could use "bus", found here https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

If you logic is too complex, I would suggest using state management found here https://vuejs.org/v2/guide/state-management.html.

thank you Tiago!

All good mate @fluksvue

@parvezmrobin's resolution works but it must be defined as this

<child @eventname="eventHandler($event)"></child>

$event is the 2nd parameter you pass on this.$emit()