Communicate Between Components Using Events in Lightning Web Components

Introduction

Standard DOM events are dispatched by Lightning web components. Custom events may also be generated and dispatched by components. To communicate the components holding hierarchy, use events. For example, the child component c-xyz-items dispatches an event to inform its parent c-xyz-apps that the user has selected it.

Lightning Web components events are generated using DOM events, which are a collection of APIs and objects that are accessible in all browsers.

The DOM event system is a programming design pattern that contains these elements.

Event name, called type
Configuration of initialization events
Emit even-numbered JavaScript objects

Generally, there are 3 ways to communicate between components using events.

Use techniques/methods for communicating in LWC (Parent and Child)
In Lightning Web Components, you can configure event communication (Child to Parent)
In Lightning Web Components, publish a subscriber model (two components that are not directly related)

Don't forget to check out: Learn All About Platform Events in Salesforce | The Developer Guide

1. LWC Communicate system (Parent to Child)

With the help of aura:method> in the Aura component, we can call the method of the child component from the parent component. In LWC, we can do the same. Become a JavaScript method in LWC Aura.

To achieve this, we use the @api decorator to make the child properties/methods publicly accessible, allowing the parent to call them directly using the JavaScript API. For example, use the @api decorator to create a public method in ChildComponent (we need to access it in the parent component), as shown below

ChildComponent:

@api
changeMessage(strString) {
    this.Message = strString.toUpperCase();
}

ParentComponent:

this.template.querySelector('c-child-component').changeMessage(event.target.value);

The querySelector() method is a standard DOM API, which returns the first element that matches the selector.

2. Lightning Web component's custom event communication (Child to Parent)

The Aura case has already been discussed. Let's talk about Lightning Web Components (LWC), where "custom events" are used to communicate from child components to parent components. Using LWC, we can create and schedule custom events.

Develop and dispatch events.

Build an event: The customEvent() function object() (constructor) can be used to create an event. In Constructor, we need to pass the custom event name and event details new customEvent(eventName, props);

Dispatch event: We must use EventTarget.dispatchEvent() method to dispatch an event.

this.dispatchEvent(new customEvent(eventName, props);

Handling events: There are two ways to monitor events.

Declare through HTML tags: When calling a child component for a declarative event listener, you need to add the "on" prefix to the event name of the parent component.

ParentComponent:

<template>
    <c-child-component oneventName={listenerHandler}></c-child-component>
</template>

JavaScript using the addEventListener method: The listener can be explicitly attached by using the addEventListner method in the parent component, as shown below:

ChildComponent

this.template.addEventListener('eventName', this.handleNotification.bind(this));

Check out another amazing blog by Anuj here: Deploying LWC OSS Apps to Heroku With and Without Express API Server | Salesforce Developer Guide

3. Publishing user model in the Lightning Network component.

Application events in Aura become the publish-subscribe model in Lightning Web Components. We use a library called pubsub to implement communication between two components that is not directly related. This is like a typical publish-subscribe model. When a component subscribes to an event and another component that triggers/publishes the event in the same scope handles the event.

Please use this link to get the pubsub utility code. The Pubsub module supports the following three methods