Free computer code on screen

Inter-component Communication in LWC | Comprehensive Guide

/ apex, Salesforce / By

In this blog post, we’ll delve into the intricacies of component communication in LWC. To establish dynamic and adaptable interactions between lightning web components, it’s essential to understand the available methods for communication. Given that LWC components can be nested, there are three primary options for facilitating communication between them:

  1. Parent to child communication
  2. Child to parent communication
  3. Communication between two distinct components

Communication from Parent to Child

To enable the parent to directly call the properties/methods of the children, you should utilize the @api decorator. This decorator exposes the children’s properties and methods via the JavaScript API.

Example in ChildComponent.js:

@api
chnageMessage(msgString){
this.Message = msgstring.toUpperCase();
}
ParentComponent.js
this.template .querySelector('c-Child-Component').changeMessage(event.target.value);

Communication from Child to Parent

In Lightning Web Components, a custom event serves as the means to relay information from a child component to a parent component. LWC empowers us to generate and dispatch custom events.

To create an event in the ChildComponent.js file:

onChnageEvent(event){
const selectEvent = new CustomEvent('customevent', {detail: Value_To_Be_PasseD});
this.dispatchEvent(selectEvent);
}

Managing Events in the Parent Component:

ParentCmp.html
<c-child-comp oncustomevent = {handleCustomEvent}></c-child-comp>
ParentCmp.js
handleCustomEvent(event){
const textVal = event.detail;
this.msg = textVal;
}

Inter-component Communication between Separate Components

To facilitate communication between components that exist outside the same DOM hierarchy, you have the option of utilizing the pubsub library or the flash messaging service. These techniques enable communication between sibling components within an outer LWC component or between two LWC components that have been independently placed in the Lightning App Builder.

One significant advantage of message channels is their ability to transcend single-page limitations. The Publish-Subscribe pattern in Lightning Web Components bears resemblance to the App-type event in Aura packages.

To fire an event in one component:

import {LightningElement,api,wire} from 'lwc';
import pubsub from 'c/pubsub' ;
import { currentPageReference } from 'lightning/navigation';
export default class LWCcommunity extends LightningElement {
@wire(currentPageReference) pageRef;
@api selectedMenu;
sendMessage(){
window.console.log('Event Firing.... ');
let message = {
  "message" : 'Hello PubSub'
}
pubsub.fire('simplevt', message);
window.console.log('Event Fired')
}
}

Registering an event in another component:

message;
connectedCallBack(){
this.register();
}
register(){
window.console.log('event Registered');
punsub.register('simplevt', this.handleEvent.bind(this));
}
handleEvent(messageFromEvt){
window.console.log('event handled', messageFromEvt);
this.message = messageFromEvt ? JSON.stringify(messageFromEvt, null, '\t'): 'no message payload';
}

Related Posts