Lightning Web Components (LWC), event communication
In Lightning Web Components (LWC), event communication allows components to send and receive messages or data. There are two types of events used for communication: Component Events and Lightning Message Service.
Component Events:
Component events are events that are defined and handled within a specific component.
To communicate using component events, you need to define an event in the component that sends the message and handle that event in the component that receives the message.
Here's an example of how to use component events for communication:
In the sending component:
import { LightningElement, wire } from 'lwc';
import { createEvent, fireEvent } from 'c/pubsub';
export default class SenderComponent extends LightningElement {
handleClick() {
const eventData = 'Hello from SenderComponent';
const event = createEvent('myEvent', eventData);
fireEvent(this, event);
}
}, event); } }
In the receiving component:
import { LightningElement, wire } from 'lwc';
import { registerListener, unregisterAllListeners } from 'c/pubsub';
export default class ReceiverComponent extends LightningElement {
connectedCallback() {
registerListener('myEvent', this.handleEvent, this);
}
handleEvent(eventData) {
// Handle the received event data
console.log(eventData);
}
disconnectedCallback() {
unregisterAllListeners(this);
}
}); } }
Lightning Message Service (LMS):
LMS is a publish-subscribe messaging framework that enables communication between components regardless of their hierarchy.
It allows components to communicate without having a direct relationship or knowledge of each other.
Here's an example of how to use LMS for communication:
In the sending component:
import { LightningElement } from 'lwc';
import { publish, MessageContext } from 'lightning/messageService';
import SAMPLE_MESSAGE_CHANNEL from '@salesforce/messageChannel/SampleMessageChannel__c';
export default class SenderComponent extends LightningElement {
@wire(MessageContext)
messageContext;
handleClick() {
const message = {
recordId: '001XXXXXXXXXXXXXXX',
message: 'Hello from SenderComponent'
};
publish(this.messageContext, SAMPLE_MESSAGE_CHANNEL, message);
}
}message); } }
In the receiving component:
import { LightningElement, wire } from 'lwc';
import { subscribe, MessageContext } from 'lightning/messageService';
import SAMPLE_MESSAGE_CHANNEL from '@salesforce/messageChannel/SampleMessageChannel__c';
export default class ReceiverComponent extends LightningElement {
@wire(MessageContext)
messageContext;
subscription;
connectedCallback() {
this.subscription = subscribe(
this.messageContext,
SAMPLE_MESSAGE_CHANNEL,
(message) => {
// Handle the received message
console.log(message);
}
);
}
disconnectedCallback() {
unsubscribe(this.subscription);
this.subscription = null;
}
}; } }
Remember to replace pubsub with the appropriate namespace or module name in the component events example, and replace SampleMessageChannel__c with the actual message channel name in the LMS example.
These examples demonstrate how to communicate between LWC components using events. Choose the appropriate method based on your specific use case and component hierarchy.
No comments: