Understanding Communication Between Two Aura Components

Aura components are self-contained and reusable building blocks for creating web applications on the Salesforce platform. In larger applications, components often need to communicate with one another.

In this blog, we’ll explore the different types of communication that can occur between two Aura components.

Types of Communication between Aura Components

There are two types of communication in Aura components.

1. Component Events
2. Application Events

Component events are best used for communicating between closely related components, while Application events are best used for triggering actions that affect multiple components.

By understanding the differences between these two types of communication, you can choose the right method for your specific use case and build more efficient and modular applications.

Let’s explore them in detail!

1. Component Events

Aura Components provide a variety of ways for components to communicate with each other, including Component Events. Component events allow components to communicate with other components that may not be in a direct parent-child relationship.

In this article, we will explore how to use component events in both parent-to-child and child-to-parent communication scenarios.

Here is an example of how component events can be used to communicate between two Aura components:

Two ways of communication in Component Events.

1. Call Child Component through Parent Component:

2. Call Parent Component method from Child Component:

2. Application Events

Application events are used to communicate between components that are not closely related to each other. They allow for decoupling between components and can be used to trigger actions that affect multiple components.

Unlike component events, application events follow a publish-subscribe pattern, where an event is fired and any component that is listening for that event can receive it.

To create an application event, you need to define the event in a separate .evt file. Here’s an example:

To publish an application event, you use the $A.get()method to get a reference to the event and then call the fire()method to publish it. Here’s an example:

To subscribe to an application event, we use the <aura:handler>tag in our component markup. Here’s an example:To subscribe to an application event, we use the <aura:handler>tag in our component markup. Here’s an example:

In this example, we define a component called **MyComponent**and use the <aura:handler> tag to subscribe to the **myEvent**event that we defined earlier. We specify the **event**attribute as “c:myEvent” to indicate that we want to subscribe to the **myEvent**event in the “c” namespace. We also specify the **action**attribute to indicate the JavaScript function that should be called when the event is fired.

Handling an Application Event:

When an application event is fired, the JavaScript function specified in the **action**attribute of the **<aura:handler>**tag is called with an **event**parameter. Here’s an example:

In this example, we define a JavaScript controller for **MyComponent**and create a function called **handleEvent**that takes the component, event, and helper parameters. We use the **getParam()**method on the **event**parameter to retrieve the value of the “message” attribute that was set when the event was fired. We then log the message to the console.