Vuejs component sibling communication
In the previous post about we talked about parent-child component communication. This post is going to be on sibling component communication.
So how do we achieve this in vuejs? Simple. Every vue instance can listen to events and can emit events. We would go through a simple implementation of using this in a project.
We are going to be using two components, component one and two(hidden). The two components are inputs that represents two steps. Step one accepts a user input, when a user leaves the input, component two is notified and therefore the second step/input appears and the user can proceed.
Get complete code is on github:
Starting code for html, this contains our two components, namely one and two.
<!DOCTYPE html>
<html><head>
<title>Component communication</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.27/css/uikit.min.css" />
</head><body><div id="root" class="uk-section">
<div class="uk-container"> <one></one> <two></two> </div>
</div><script src="https://unpkg.com/vue"></script>
<script src="app.js"></script></body></html>
Starting code for app.js:
Vue.component('one', {template: `
<div>
<p>Step 1: Enter a pin number: <input v-model="pin"> </p>
</div>
`,data () {
return {
pin: ""
}
},methods: {}
})Vue.component('two', {template: `
<div v-if="showMessage">
<p>Step 2: Enter your username: <input> </p>
</div>
`,data () {
return {
showMessage: false
}
},mounted () {
},methods: {
}})new Vue ({el: '#root',})
The way to achieve this is by creating an empty Vue instance that we’ll use to globally fire and listen for events in anywhere required.
const event = new Vue(); //add this to top of our js fileThis will make available to us two methods:
event.$emit('event-name')
event.$on('event-name')Note: For this to work correctly, we need to make sure that this event is globally accessible. How you do this will depent on your application structure. In a module-based applications, you’ll export that instance of the vue instance we are using as event from a certain file and then import it wherever it’s needed. As your application grows in complexity you might want to use Vuex for this.
Continue with our project, update component one template to this:
<div>
<p>Step 1: Enter a pin number: <input v-model="pin" @blur="goToStepTwo"> </p>
</div>and it’s method to this:
methods: { goToStepTwo () {
event.$emit('step-two');
}}
So, after the user types and leaves the input the goToStepTwo method is called, this fires an event called ‘step-two’.
For the second input to appear, component two must listen for the event ‘step-two’ how? Update component two method to this:
mounted () {
event.$on('step-two', () => this.alertMessageReceived())
},On mounting the component two, it should listen for an event called step-two. Once this event is received component two will call a method, alertMessageReceived to show the input for step two.
methods: {
alertMessageReceived () {
this.showMessage = true
}
}Done! We have achieved component sibling communication in vuejs.
