To communicate between components that aren’t in the same DOM tree, use a singleton library that follows the publish-subscribe pattern.
The Aura Component uses publisher subscriber (pubsub) method to communicate between components. This is also true for lightning web components, but LWC uses different mechanism to achieve this.
In LWC, we don't have separate event components. We fire and handle event programatically in lwc.
Let's see how pubsub method can be used to fire and handle event in totally unrelated lwc components.
1st Step :- Create a lwc in VScode
name - pubsub
You can remove html file from this, because it is not required.
Copy the code from github for pubsub.js and pubsub.js-meta.xml from below place
2nd Step - Create a component, that will fire event.
appEventChild.html
appEventChild.js
Here we have imported CurrentPageReference and FireEvent from lightning/navigation and pubsub module respectively. The syntax of FireEvent is as follows.
const fireEvent = (pageRef, eventName, payload)
Where pageRef is CurrentPageReference.
eventName is the name of your event, which will be same while handling the event.
payload is the data you want to transfer.
To get current page reference, we need to wire it with the variable we have imported.
@Wire(CurrentPageReference) pageRef
Here pageRef is our Current page Reference.
appEventChild.js-meta.xml
3rd Step - Create a component, that will handle event.
appEventParent.html
We are just printing the value, which is transferred by child cmp.
appEventParent.js
Here in handling cmp, we need to import registerListener to define a handler of event, and a unregisterAllListener to undefine all Listeners in this component.
The syntax of registerListener -
/** * Registers a callback for an event * @param {string} eventName - Name of the event to listen for. Same as in child cmp * @param {function} callback - Function to invoke when said event is fired. * @param {object} thisArg - The value to be passed as the this parameter to the callback function is bound, and to get values passed by firing event. */ const registerListener = (eventName, callback, thisArg)
When an event fired, this cmp will automatically call "handleEvent" function.
There is one more thing that need our attention, and that is unregistering listeners.
There are two methods for this.
1. unregisterListener
** * Unregisters a callback for an event * @param {string} eventName - Name of the event to unregister from. * @param {function} callback - Function to unregister. * @param {object} thisArg - The value to be passed as the this parameter to the callback function is bound. */ const unregisterListener = (eventName, callback, thisArg)
2. unregisterAllListeners
** * Unregisters all event listeners bound to an object. * @param {object} thisArg - All the callbacks bound to this object will be removed. */ const unregisterAllListeners
unregisterAllListeners is for unregistering all listerns at once, and unregisterListener is to unregister a single listener at a time.
appEventParent.js-meta.xml
After deploying code, place both component on a single page, and test.
Please comment if you face any issue.