Communication Between Components using LWC

There will be multiple scenarios where developers work with multiple components, including nested components within a component. It’s important to understand how components communicate with each other. Each component is a separate entity with its own variables, events, HTML design, and the ability to communicate with the server (APEX) individually. However, it’s crucial to note that in certain situations, components need to communicate with each other. This approach can save processing time by preventing each component from making a server call every time there is a change in data.

A component within a component creates a parent-child relationship. How a parent component communicates with a child component is completely different from how a child communicates. And both are completely different from how unrelated component communicates.

There are 3 different types of communication that we come across.

1) Child to Parent Communication
2) Parent to Child Communication
3) Unrelated components (Separate components).

We will discuss all the scenarios with examples.

1) Child to Parent Communication

For a child component to communicate with parent component, A child component dispatches a custom event which will trigger an update in the parent component.

2) Parent to Child Communication

For a parent component to communicate with child component, A child component exposes a property or function to make that variable publicly available. Then the parent can update the child’s public property or call child’s function.

3) Unrelated components (Separate components).

To communicate across subtrees in a DOM we use a concept called Lightning Message Service(LMS).

Note:

Trailhead : Communicate Between Lightning Web Components