Design patterns for communication between Vue.js components

As developers, we want to produce code that is manageable and maintainable, which is also easier to debug and test. To achieve this, we employ best practices called patterns. Patterns are proven algorithms and architectures that help us accomplish specific tasks in an efficient and predictable way.

In this tutorial, we'll take a look at the most common Vue.js component communication patterns, as well as some pitfalls we should avoid. We all know that in real life, there is no single solution to every problem. Likewise, in Vue.js application development, there is no universal pattern that applies to all programming scenarios. Each mode has its own advantages and disadvantages and is suitable for specific use cases.

The most important thing for Vue.js developers is to understand all the most common patterns so that we can choose the right one for a given project. This results in correct and efficient component communication.

Why is correct component communication important?

When we build an application using a component-based framework such as Vue.js, our goal is to keep the components of the application as isolated as possible. 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, so we can add it to our application or remove it without breaking the functionality of the application .

However, we cannot achieve complete isolation and independence among the components of the application. At some point, they need to communicate with each other: exchange some data, change the state of the application, etc. Therefore, it is important for us to learn how to do this communication correctly while keeping the application functional, flexible, and scalable.

Vue.js component communication overview

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

1. Direct parent-child communication, based on strict parent-child and child-parent relationships.
2. Cross-component communication, where one component can "talk" to any other component, regardless of their relationship.

In the following sections we will explore both types along with appropriate examples.

Direct parent-child communication

The standard model for component communication that Vue.js supports out of the box is the parent-child model implemented through props and custom events. In the image below you can visually see this model in action.

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

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

Parent-child communication

Let's say the component we have is part of a game. Most games display the game score somewhere in the interface. Imagine that we declare a score variable in the Parent A component, and we want to display it in the Child A component. So, how can we do this?

To send data from parent to child, Vue.js uses props. Passing attributes requires three necessary steps:

1. Register the properties in the child as follows: props: ["score"]
2. Use the attributes registered in the subtemplate as follows: <span>Score: {{ Score }}</span>
3. Bind this property to the score variable (in the parent template) like this: <child-a :score="score"></child-a>

Let's explore a complete example to better understand what is actually happening:

// HTML part

<div id="app">
  <grand-parent/>
</div>

// JavaScript part

Vue.component('ChildB',{
  template:`
    <div id="child-b">
      <h2>Child B</h2>
      <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">data {{ this.$data }}

Copy after login

Copy after login