An Overview Of Component Communication In Vue.js

Introduction

 
In this article, I would like to talk about the front-end framework, Vue js. It is not very difficult for those who are familiar with the concepts of Angular. In this article, we will learn about communication between components in Vue.js.
 
There are multiple ways for inter-component communication in Vue.js, as mentioned below.
  1. Using props
  2. Using event
  3. Using event bus to communicate between any component
The first way of communication from a child component to a parent component is using props.
 
Firstly, I am going to cast a light on props - What, why, and how to use props. Let's start with why we need props.
  • Props are known as one-way communication. It means Props allow you to pass the data from the parent component to the child component.
     
  • At any time, if the value will change in the parent component, then the new value is set to the child and rendered (behind the scenes, the replacement of the hot module will work for rendering without a refresh ).
Let me give an example of props.
 
Go and create a component called parent component (Parent.vue).
  1. <template>    
  2.    <div>    
  3.       <Child titleOfChild="Children Component"></Child>    
  4.    </div>    
  5. </template>    
  6. <script>    
  7.    // Path of child component    
  8.    import { Child } from "./child.vue";    
  9.    export default {    
  10.       name: 'Parent',    
  11.       components: {    
  12.          Child    
  13.          }    
  14.    }    
  15. </script>   
NOTE
 
We have the child component tag (<Child></Child>) and here, we are passing data to the child component as "titleOfChild".
 
Go and create a component called child component (Child.vue).
  1. <template>    
  2.    <div>    
  3.       <h1>{{titleOfChild}}</h1>    
  4.    </div>    
  5. </template>    
  6. <script>    
  7. export default {    
  8.    name: 'Child',    
  9.    props: [    
  10.    // camelCase in JavaScript    
  11.    'titleOfChild'    
  12.    ]    
  13. }    
  14. </script>   
NOTE
 
In child component, we are using props to get the value ("titleOfChild") which is passing from the parent component and we can directly use this value in the template using an expression (double curly braces).
 
Props can be used in different ways like,
  1. Passing static or dynamic props
  2. Passing a Number
  3. Passing a Boolean
  4. Passing an Object
  5. Passing an Array
The second way of communication in Vue.js from parent component to child component is described below.
 
Now, I am going to show how we can pass data from a child component to the parent component.
 
For this, we need to emit an event.
 
For example,
 
STEP 1
 
Go and create a child component (Child.vue).
  1. <template>    
  2.    <div class="submit-btn">    
  3.       <p>    
  4.          <input type="submit" value="Submit" @click="callingParentComponentMethod">    
  5.          "OR"    
  6.          <input type="submit" value="Submit" v-on:click="callingParentComponentMethod">    
  7.       </p>    
  8.    </div>    
  9. </template>    
  10. <script>    
  11. export default {    
  12.    name: "Child",    
  13.    methods: {    
  14.       // This method will call on click of submit button    
  15.       callingParentComponentMethod() {    
  16.       // emit the event and call the parent component    
  17.       this.$emit("setParentComponentDetails");    
  18.       }    
  19.    }    
  20. // props: ["cTitle", "cAbout", "cHome"]    
  21. };    
  22. </script>  
NOTE
 
In the template section, we are calling a method "callingParentComponentMethod" on the click of Submit.
 
You can call the method in two ways like @click or v-on: click .
 
Inside the script section, we are using the "this.$emit()" method to call the parent component.
 
You can pass some parameters from child component to parent component. Below are the examples.
  1. this.$emit("setParentComponentDetails", param1, param2);   
STEP 2
 
Go and create a parent component (Parent.vue).
  1. <template>    
  2.    <div>    
  3.       <Child @setParentComponentDetails="setDetailsForComponent" > </Child>    
  4.    </div>    
  5. </template>    
  6. <script>    
  7. // Path of child component    
  8. import { Child } from "./child.vue";    
  9.    export default {    
  10.    name: 'Parent',    
  11.    components: {    
  12.       Child    
  13.    },    
  14.    methods: {    
  15.       // Called by child component    
  16.       setDetailsForComponent() {    
  17.       console.log("Calling from child component");    
  18.       }    
  19.    }    
  20. }    
  21. </script>   
NOTE
 
In template section, we are setting an event ("setParentComponentDetails") which is sent by the child component and called method ("setDetailsForComponent()") inside the script section.
 
Scenario
 
If you are getting some parameters from a child component, then you can receive these parameters in parent component inside the method section like:
  1. setDetailsForComponent(param1, param2){    
  2.    Console.log(param1 + '' + param2);    
  3. }   
The third way of communication in Vue.js when there is no relationship between components is given below.
 
Firstly, we need to understand what is the meaning of no relationship between components. It means when two sibling components (no parent-child relationship) are communicating, we can use the EVENT BUS/ publish-subscribe pattern.
 
We can use Event Bus on the simplest architecture. It allows us to emit an event in one component and listen for that event in another component.
 
Below are several steps to get this communication working.
 
Step 1 - Initialization of Event Bus
 
Create a file 'event-bus.js' and write the below code.
  1. import Vue from 'vue';    
  2. export const EventBus = new Vue();   
Step 2 - Using the Event bus
 
We have created the event bus; now, we need to import that in our component.
  1. import { EventBus } from "./event-bus.js";   
Step 3 - Sending Event from component
 
We need to emit an event whenever someone clicks the button.
 
Create a new component 'component1.vue' and write the below code.
  1. <template>    
  2.    <div class="click-me">    
  3.       <button @click="emitGlobalClickEvent">Please Click me</button>    
  4.    </div>    
  5. </template>    
  6. <script>    
  7. // Import the EventBus we just created.    
  8. import { EventBus } from "./event-bus.js";    
  9.    export default {    
  10.    name:'component1',    
  11.    data() {    
  12.    return {    
  13.       Count: 0    
  14.    };    
  15. },    
  16. methods: {    
  17. emitGlobalClickEvent() {    
  18.    this.Count++;    
  19.       // Send the event on a channel (i-got-clicked) with a payload (the click count.)    
  20.       EventBus.$emit("clicked-event"this.Count);    
  21.       }    
  22.    }    
  23. };    
  24. </script>   
NOTE
 
Here, we are setting Event "clicked-event" which will be used as a receiving event in other components.
 
Step 4 - Receiving/Listening Event
 
We need to listen to an event using Event.$on.
 
Create a new component, 'component2.vue,' and write the below code.
  1. <script>    
  2. // Import the EventBus.    
  3. import { EventBus } from "./event-bus.js";    
  4. export default {    
  5.    name: 'Component2',    
  6.    mounted() {    
  7.    // Listen for the 'clicked-event' and its payload.    
  8.       EventBus.$on("clicked-event", Count=> {    
  9.       console.log(`Oh, that's great. It's gotten ${Count} clicks! :)`);    
  10.       });    
  11.    }    
  12. };    
  13. </script>   
NOTE
 
Here, we are listening to the event "clicked-event" inside the lifecycle hook 'mounted'.
 
ALTERNATIVE OPTION
 
Sometimes, you will get some complex scenarios. Then time, we have an option to use Vueex or any third-party libraries.
 

Summary

 
I hope this article will be useful and helpful to everyone. Thanks for reading :).
 
Happy learning :)