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.

Using props
Using event
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).

<template>
<div>
<Child titleOfChild="Children Component"></Child>
</div>
</template>
<script>
// Path of child component
import { Child } from "./child.vue";
export default {
name: 'Parent',
components: {
Child
}
}
</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).

<template>
<div>
<h1>{{titleOfChild}}</h1>
</div>
</template>
<script>
export default {
name: 'Child',
props: [
// camelCase in JavaScript
'titleOfChild'
]
}
</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,

Passing static or dynamic props
Passing a Number
Passing a Boolean
Passing an Object
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).

<template>
<div class="submit-btn">
<p>
<input type="submit" value="Submit" @click="callingParentComponentMethod">
"OR"
<input type="submit" value="Submit" v-on:click="callingParentComponentMethod">
</p>
</div>
</template>
<script>
export default {
name: "Child",
methods: {
// This method will call on click of submit button
callingParentComponentMethod() {
// emit the event and call the parent component
this.$emit("setParentComponentDetails");
}
}
// props: ["cTitle", "cAbout", "cHome"]
};
</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.

this.$emit("setParentComponentDetails", param1, param2);

STEP 2

Go and create a parent component (Parent.vue).

<template>
<div>
<Child @setParentComponentDetails="setDetailsForComponent" > </Child>
</div>
</template>
<script>
// Path of child component
import { Child } from "./child.vue";
export default {
name: 'Parent',
components: {
Child
},
methods: {
// Called by child component
setDetailsForComponent() {
console.log("Calling from child component");
}
}
}
</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:

setDetailsForComponent(param1, param2){
Console.log(param1 + '' + param2);
}

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.

import Vue from 'vue';
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.

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.

<template>
<div class="click-me">
<button @click="emitGlobalClickEvent">Please Click me</button>
</div>
</template>
<script>
// Import the EventBus we just created.
import { EventBus } from "./event-bus.js";
export default {
name:'component1',
data() {
return {
Count: 0
};
},
methods: {
emitGlobalClickEvent() {
this.Count++;
// Send the event on a channel (i-got-clicked) with a payload (the click count.)
EventBus.$emit("clicked-event", this.Count);
}
}
};
</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.

<script>
// Import the EventBus.
import { EventBus } from "./event-bus.js";
export default {
name: 'Component2',
mounted() {
// Listen for the 'clicked-event' and its payload.
EventBus.$on("clicked-event", Count=> {
console.log(`Oh, that's great. It's gotten ${Count} clicks! :)`);
});
}
};
</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 :)