Tutorial by Examples

To send an event: vm.$emit('new-message'); To catch an event: vm.$on('new-message'); To send an event to all components down: vm.$broadcast('new-message'); To send an event to all components up: vm.$dispatch('new-message'); Note: $broadcast and $dispatch are deprecated in Vue2. (see Vue2 feature...

The following picture illustrates how component communication should work. The picture comes from The Progressive Framework slides of Evan You (Developer of VueJS). Here is an example of how it works : DEMO HTML <script type="x-template" id="message-box"> <inp...

You might have realized that $emit is scoped to the component that is emitting the event. That's a problem when you want to communicate between components far from one another in the component tree. Note: In Vue1 you coud use $dispatch or $broadcast, but not in Vue2. The reason being that it doesn'...