VueJs Events
Examples
Events syntax
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
When should I use events ?
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 :
HTML
<script type="x-template" id="message-box">
<input type="text" v-model="msg" @keyup="$emit('new-message', msg)" />
</script>
<message-box :msg="message" @new-message="updateMessage"></message-box>
<div>You typed: {{message}}</div>JS
var messageBox = {
template: '#message-box',
props: ['msg']
};
new Vue({
el: 'body',
data: {
message: ''
},
methods: {
updateMessage: function(msg) {
this.message = msg;
}
},
components: {
'message-box': messageBox
}
});The example above can be improved !
The example above shows how the component communication works. But in case of a custominput component, to synchronize the parent variable with the value typed, we sould use
v-modelIn Vue1, you should use .sync on the prop sent to the
HTML Vue1
<script type="x-template" id="message-box">
<input v-model="value" />
</script>
<div id="app">
<message-box :value.sync="message"></message-box>
<div>You typed: {{message}}</div>
</div>In Vue2, there is a special 'input' event you can $emit. Using this event allows you to put a vmodel directly on the
HTML Vue2
<script type="x-template" id="message-box">
<input :value="value" @input="$emit('input', $event.target.value)" />
</script>
<div id="app">
<message-box v-model="message"></message-box>
<div>You typed: {{message}}</div>
</div>JS Vue 1 & 2
var messageBox = {
template: '#message-box',
props: ['value']
};
new Vue({
el: '#app',
data: {
message: ''
},
components: {
'message-box': messageBox
}
});Notice how faster the input is updated.
How to deal with deprecation of $dispatch and $broadcast? (bus event pattern)
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't scale well. There is a popular bus pattern to manage this:
HTML
<script type="x-template" id="sender">
<button @click="bus.$emit('new-event')">Click me to send an event !</button>
</script>
<script type="x-template" id="receiver">
<div>I received {{numberOfEvents}} event{{numberOfEvents == 1 ? '' : 's'}}</div>
</script>
<sender></sender>
<receiver></receiver>JS
var bus = new Vue();
var senderComponent = {
template: '#sender',
data() {
return {
bus: bus
}
}
};
var receiverComponent = {
template: '#receiver',
data() {
return {
numberOfEvents: 0
}
},
ready() {
var self = this;
bus.$on('new-event', function() {
++self.numberOfEvents;
});
}
};
new Vue({
el: 'body',
components: {
'sender': senderComponent,
'receiver': receiverComponent
}
});You just need to understand that any Vue() instance can $emit and catch ($on) an event. We just declare a global Vue instance call bus and then any component with this variable can emit and catch events from it. Just make sure the component has access to the bus variable.