Design Patterns for Communication Between Vue.js Component

As developers, we want to produce manageable and maintainable code, which is also easier to debug and test. To make this possible, we adopt best practices known as patterns. Patterns are proven algorithms and architectures, which help us to do particular tasks in an efficient and predictable way. 

In this tutorial, we’ll look at the most common Vue.js component communication patterns, along with some pitfalls we should avoid. We all know that, in real life, there is no single solution to all problems. In the same way, in Vue.js app development, there is no universal pattern for all programming scenarios. Each pattern has its own advantages and drawbacks, and it’s suitable for particular use cases. The essential thing for Vue.js developers is to know all the most common patterns, so we can choose the right one for a given project. This will lead to proper and efficient component communication.

Why Proper Components Communication Is Important?

When we build an app with a component-based framework like Vue.js, we aim to make our app’s components as isolated as they can be. This makes them reusable, maintainable, and testable. To make a component reusable, we need to shape it in a more abstract and decoupled (or loosely coupled) form, and as such, we can add it to our app or remove it without breaking the app’s functionality. 

However, we can’t achieve complete isolation and independence in our app’s components. At some point they need to communicate each other: to exchange some data, to change app’s state, etc. So, it’s important for us to learn how to accomplish this communication properly while still keeping the app working, flexible, and scalable.

Vue.js Components Communication Overview 

In Vue.js, there are two main types of communication between components: 

  1. Direct parent-child communication, based on the strict parent-to-child and child-to-parent relationships. 
  2. Cross-components communication, in which one component can “talk” to any other one regardless their relationships. 

In the following sections, we’ll explore both types along with appropriate examples. 

Direct Parent-Child Communication

The standard model components communication, which Vue.js supports out of the box, is the parent-child model realized via props and custom events. In the diagram below, you can see a visual representation of how this model looks in action.

As you can see, a parent can communicate only with its direct children, and children can communicate directly only with their parent. In this model, no sibling or cross-component communication is possible. 

In the following sections, we’ll take the components from the diagram above and will implement them in a series of practical examples.

Parent-to-Child Communication

Let’s suppose the components we have are part of a game. Most games display the game score somewhere in their interface. Imagine that we have a score variable declared in the Parent A component, and we want to display it in the Child A component. So, how can we do that? 

To dispatch data from a parent to its children Vue.js uses props. There are three necessary steps to pass down a property:

  1. Registering the property in the child, like this props: ["score"]
  2. Using the registered property in the child’s template, like this Score: {{ score }}
  3. Binding the property to the score variable (in parent’s template), like this 

Let’s explore the full example to better understand what really happens:

Powered by WPeMatico

Leave a Comment

Scroll to Top