Communicate with Events inLightning web components (LWC) - Salesforce Developers

There are mainly 3 approaches for communication between the Lightning components using events.

1. Communication using Method in LWC ( Parent to Child )
2. Custom Event Communication in Lightning Web Component (Child to Parent )
3. Publish Subscriber model in Lightning Web Component ( Two components which doesn't have a direct relation )

1. Communication using Method in LWC ( Parent to Child )

we can call the method of Child Component from the Parent Component with the help of JavaScript Methods.

LWC have used @api decorator to make the children properties public available so parent can be able to call it directly using JavaScript API.

For example create one public variable and method (which we need to access in parent component) in ChildComponent with @api decorator like below:

ChildComponent:

import { LightningElement, api } from 'lwc';

export default class HelloWorld extends LightningElement {

    @api name;

    @api message;

    @api upperCaseMessage(strString) {

     this.Message = strString.toUpperCase();

}

}

<template>

    Message Will Come here from Parent Component :- {Message}

</template>

ParentComponent:

<template>

  <lightning-layout-item flexibility="auto" padding="around-small"  >

    <lightning-input label="Enter the Message" onchange={handleChangeEvent}>

</lightning-input>

</lightning-layout-item>

<lightning-card title="childData">

   <c-lwc-hello-world></c-lwc-hello-world><!--childComponent Name-->

</lightning-card>

</template>

import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {

handleChangeEvent(event){

  this.template.querySelector('c-lwc-hello-world').changeMessage(event.target.value);

 }

}

2. Custom Event Communication in Lightning Web Component (Child to Parent )

Custom Event is used to make the communication from Child Component to Parent Component.

In LWC we can create and dispatch the custom event.

Create and Dispatch an Event

Create Event : We can use the customEvent() constructor to create an event. In constructor we need to pass custom event name and detail of the event.

new customEvent(eventName, detail);

Dispatch Event : We have to dispatch an event at with EventTarget.dispatchEvent() method.

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

Handle an Event : There are two ways to listen to an event 

• Declarative via html markup : We need to add “on” prefix in the event name in Parent Component during calling of Child Component for Declaratively event listener.

ParentComponent:

    <template>

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

    </template>

• JavaScript using addEventListener method : We can explicitly attach a listener by using the addEventListner method in the parent component.

ChildComponent:

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

For More Details And Examples on this please visit : EventDispatch/Listner 

3. Publish Subscriber model in Lightning Web Component ( Two components which doesn't have a direct relation )

Llibrary called pubsub to achieve the communication between two components which doesn't have a direct relation to each other. An event is subscribed by a component and handled when another component which publishes the event within the same scope.

Please use this link to get the pub sub utility code. Pubsub module support below three method

1. Register 
2. UnRegister
3. Fire

Example :

import { LightningElement, api, wire } from 'lwc';

import { CurrentPageReference } from 'lightning/navigation';

import {

    registerListener,

    unregisterListener,

    unregisterAllListeners,

    fireEvent

} from 'c/pubsub';

export default class AuraPubsub extends LightningElement {

    @wire(CurrentPageReference) pageRef;

    connectedCallback() {

        this.dispatchEvent(new CustomEvent('ready'));

    }

    @api

    registerListener(eventName, callback) {

        registerListener(eventName, callback, this);

    }

    @api

    unregisterListener(eventName, callback) {

        unregisterListener(eventName, callback, this);

    }

    @api

    unregisterAllListeners() {

        unregisterAllListeners(this);

    }

    @api

    fireEvent(eventName, data) {

        fireEvent(this.pageRef, eventName, data);

    }

}

Fire the event from other Component. In that js file, We need to trigger the event with name and value. Remember, we also need to send the page reference attribute as current page reference for successful communication

import {  fireEvent } from 'c/pubsub';

import { CurrentPageReference } from 'lightning/navigation';

export default class OtherComponent extends LightningElement {

     @track myMessage;

     @wire(CurrentPageReference) pageRef;

     sendMessage() {

          fireEvent(this.pageRef, 'messageFromSpace', this.myMessage);

     }

}