Communication between Components in LWC | The Ultimate Guide
In this blog, we will understand the communication of components in LWC. To create dynamic and flexible communication of components with each other your lightning web component is required. Since we know that the lwc component can be nested, there are 3 options for communication between components.
Three Types of communication between the components:-
- Parent to child communication
- Child to parent communication
- Communication between two separate components
Parent To Child Communication
We need to use the @api decorator to expose the children's properties/methods for the parent to call directly using JavaScript API.
ChildComponent.js
@api
chnageMessage(msgString){
this.Message = msgstring.toUpperCase();
}
ParentComponent.js
this.template .querySelector('c-Child-Component').changeMessage(event.target.value);
Don't forget to check out: How do you Add LWC Component to Action Button?
Child-to-Parent Communication
In Lightning Web Components, a custom event is used to communicate from a child component to a parent component. With LWC we can create and send custom events.
Create Event in ChildComponent js file:
onChnageEvent(event){
const selectEvent = new CustomEvent('customevent', {detail: Value_To_Be_PasseD});
this.dispatchEvent(selectEvent);
}
Handling event in Parent Component:
ParentCmp.html
<c-child-comp oncustomevent = {handleCustomEvent}></c-child-comp>
ParentCmp.js
handleCustomEvent(event){
const textVal = event.detail;
this.msg = textVal;
}
Communication between two Separate Components
You can use the pubsub library or the flash messaging service to communicate between components that are not in the same DOM hierarchy. These methods can be used to communicate between sibling components in an outer lwc component or between two lwc components that are dropped separately in lightning app builder.
The advantage over pubsub is that message channels aren't restricted to a single page. The Publish-Subscribe pattern in Lightning Web Components is similar to the App-type event in Aura packages.
Fire 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')
}
}
Check out another amazing blog by Rahul here: All You Need to Know About Salesforce Governor Limits
Registering 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';
}
Responses