Vue 2 - Communication Between Components (sending And Receiving Data)

So I working on app in Vue. I have problem with sending and receiving data between components. Already tried with $dispatch/$broadcast, $emit/$on but still now working. I want to s

Solution 1:

$dispatch and $broadcast are deprecated in Vue 2.0.

In your case, what you need is communication between a parent component and child component. When a child $emits an event, parent can listen to it by providing a method in template markup itself, using v-on:parentMethod() as follows:

<child-component v-on:child-event="handlerMethod"></child-component>

The above markup is done inside parent component's template. And the parent component needs to have that handlerMethod in its methods.

Here is a sample "parent-child communication" question on Stackoverflow, which has a jsFiddle example also: Delete a Vue child component

You may use the above answer as reference to implement $emit in your app.

Edit: Additional Notes

I forgot to mention the note about three level hierarchy you have. In your app, you have the following hierarchy:

parent: vue_main

child 1: HeaderElement

child 1.1: ClubSelection

For sending events from ClubSelection to vue_main, you may either use non parent-child communication method or you can relay the event using the intermediate HeaderElement.

Here is how the event relay can work:

• Step 1: ClubSelection sends a $emit, which is received by HeaderElement using v-on.
• Step 2: The handlerMethod in HeaderElement does a this.$emit, which can be received by your main template using another v-on.

While the above may look a bit convoluted, it is much more efficient than broadcasting to every single component in the app, as it is generally done in Angualr 1.x or other frameworks.