Publisher Subscriber (pubsub) Pattern in Lightning Web Components

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

https://github.com/trailheadapps/lwc-recipes/tree/master/force-app/main/default/lwc/pubsub

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.