Vue JS

A comprehensive guide to Component Communication in Vue.js

Dec 27, 2021

Hetal Nathvani

By Hetal Nathvani

A comprehensive guide to Component Communication in Vue.js

Vue.js enables you to construct single-page applications. But what exactly is a single-page application? Unknowingly, we are all frequent users of single-page applications. A single-page application is one that runs within a browser and does not require page reloading while in use.

In modern JS frameworks, the entire page is divided into multiple components to increase the application’s performance, structure, and reusability.
Each component has its own UI & Design structure, as well as its own set of functionality. The component-based architecture allows us to easily maintain and develop the software.

According to the VueJS official document, “The components are an abstraction that lets us build large-scale applications composed of small, self-contained and often reusable components”.

A simple admin panel dashboard, for example, can be divided into four components: the header, footer, sidebar, and main section, as illustrated in the diagram below.

Also Read: [Revolutionize Your Business With Vue JS]

★ However, when it comes to Vue JS Development, we frequently encounter scenarios in which we must move data from one component to another. There are three primary methods by which a component transmits data to another component, namely,

Parent to Child

Child to Parent

From any component to any other component

 

To begin with, when a component is defined within another component, the declared component is a child component, and the component within which the child component is called is a parent component.

For example, With reference to the diagram 1.1, The Parent component is the dashboard component and the child components are, Sidebar, Header, Footer and Main section components

Parent to child communication

In parent to child component communication, parent component passes data to child component by adding the argument in the component declaration i.e., props which can be defined as properties.

 

As per the preceding screenshots, the Child component is called by the Parent component, and the Parent component sends a message to the Child component by adding arguments to the declaration, and the Child expects this argument as props (properties). In the child component, you must specify the exact data type of the anticipated props.

Child to parent communication

In child to parent component communication, the child component passes data to the parent component with the use of events i.e., $emit which is also known as events emitting.

As per the preceding screenshots, the Child component is called by the Parent component, and the Child component sends a message to the Parent component by emitting events.

 

From any component to any other component using Event Bus

This method of component communication is not restricted to parent-child components; it can communicate with any components regardless of their relationship using Event Bus.

In the above screenshot, we have dispatched an event from the Demo component to any other component that is in no way related to the Demo component.

The provided arguments are optional, and you can pass as many as you want. I’ve passed two arguments to other components in this case.

The screenshot above shows the Test component, which listens for events fired by the Demo component. By using $root.$on, we can listen in on the event.

In the Test component, we can access all of the arguments passed by the Demo component.

Conclusion

And that covers it up: three different methods to component communication with and without a parent-child relationship. Alternatively, we can utilize vuex as part of state management in vue.js, which is a bit more complicated than the previous methods. However, before executing any code, keep your application’s structure and requirements in mind.

Subscribe to Our Blogs

News & learnings via our blogs meets our aim to make people realize how businesses can prosper with technologies.

More from us

Bedrock Roots Powering the Modern WordPress Development

Bedrock Roots Powering the Modern WordPress Development

We all know about WordPress and its wider range of benefits. It is an exemplary Content Management System (CMS) that has been used by 43.2% of t...

Importance of the best Collaboration tools in 2022

Importance of the best Collaboration tools in 2022

The phrase "project collaboration" has become very popular in the workplace for a good reason. Team Collaboration is the process by which two or...

Cloud Computing for Healthcare: Things You Need to Know

Cloud Computing for Healthcare: Things You Need to Know

Innovations perk me up when I see industries and businesses getting transformed with cutting-edge technologies. But by far, I count technologica...

Got a project for us?

Let's talk.
lets-talk

Reduce Development Cost by 60%

lets-talk

Faster Deployment, Highest Quality

lets-talk

100+ Software Engineers for Hire