0👍
$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 $emit
s 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 usingv-on
. - Step 2: The
handlerMethod
in HeaderElement does athis.$emit
, which can be received by your main template using anotherv-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.
- [Vuejs]-Show Editable fields on page load using medium-editor
- [Vuejs]-How use Regex in Localization Laravel 5.4 with Vue JS