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.

Current Ratings 0/5 (0)

Thanks For Rating Us

More from us

How To Make An App Like Transit?

How To Make An App Like Transit?

The journey is exciting whether it is a short or a long one. The transportation system tends to play a key role in any journey across a city or ...

A complete guide to CSS Units and Values

A complete guide to CSS Units and Values

When I first started writing CSS code, I was perplexed by the numerous units used for font size, and I had no idea when, how, or why to utilize ...

GraphQL – Future of APIs

GraphQL – Future of APIs

GraphQL is a query language and server-side runtime for application programming interfaces (APIs) that focuses on giving clients only the data t...

Got a project for us?

Let's talk.

Reduce Development Cost by 60%

Faster Deployment, Highest Quality

100+ Software Engineers for Hire