To understand this concept, please go through this trailhead-
https://trailhead.salesforce.com/content/learn/projects/lwc-build-flexible-apps/inter-comp-events?trail_id=build-lightning-web-components
https://trailhead.salesforce.com/content/learn/projects/lwc-build-flexible-apps/inter-comp-events?trail_id=build-lightning-web-components
pubsub.js
/**
* A basic pub-sub mechanism for sibling component communication
*
* TODO – adopt standard flexipage sibling communication mechanism when it’s available.
*/
const events = {};
const samePageRef = (pageRef1, pageRef2) => {
const obj1 = pageRef1.attributes;
const obj2 = pageRef2.attributes;
return Object.keys(obj1)
.concat(Object.keys(obj2))
.every(key => {
return obj1[key] === obj2[key];
});
};
/**
* Registers a callback for an event
* @param {string} eventName – Name of the event to listen for.
* @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.
*/
const registerListener = (eventName, callback, thisArg) => {
// Checking that the listener has a pageRef property. We rely on that property for filtering purpose in fireEvent()
if (!thisArg.pageRef) {
throw new Error(
‘pubsub listeners need a “@wire(CurrentPageReference) pageRef” property’,
);
}
if (!events[eventName]) {
events[eventName] = [];
}
const duplicate = events[eventName].find(listener => {
return listener.callback === callback && listener.thisArg === thisArg;
});
if (!duplicate) {
events[eventName].push({ callback, thisArg });
}
};
/**
* 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) => {
if (events[eventName]) {
events[eventName] = events[eventName].filter(
listener =>
listener.callback !== callback || listener.thisArg !== thisArg,
);
}
};
/**
* Unregisters all event listeners bound to an object.
* @param {object} thisArg – All the callbacks bound to this object will be removed.
*/
const unregisterAllListeners = thisArg => {
Object.keys(events).forEach(eventName => {
events[eventName] = events[eventName].filter(
listener => listener.thisArg !== thisArg,
);
});
};
/**
* Fires an event to listeners.
* @param {object} pageRef – Reference of the page that represents the event scope.
* @param {string} eventName – Name of the event to fire.
* @param {*} payload – Payload of the event to fire.
*/
const fireEvent = (pageRef, eventName, payload) => {
if (events[eventName]) {
const listeners = events[eventName];
listeners.forEach(listener => {
if (samePageRef(pageRef, listener.thisArg.pageRef)) {
try {
listener.callback.call(listener.thisArg, payload);
} catch (error) {
// fail silently
}
}
});
}
};
export {
registerListener,
unregisterListener,
unregisterAllListeners,
fireEvent,
};
bearsList.js
import following module
import { fireEvent } from ‘c/pubsub’;
bears;
@wire(CurrentPageReference) pageRef;
@wire(searchBears, {searchTerm: ‘$searchTerm’})
loadBears(result) {
this.bears = result;
if (result.data) {
fireEvent(this.pageRef, ‘bearListUpdate’, result.data);
}
}
it publishes the bearListUpdate event.
bearMap.js
connectedCallback() {
// subscribe to bearListUpdate event
registerListener(‘bearListUpdate’, this.handleBearListUpdate, this);
}
disconnectedCallback() {
// unsubscribe from bearListUpdate event
unregisterAllListeners(this);
}
handleBearListUpdate(bears) {
this.mapMarkers = bears.map(bear => {
const Latitude = bear.Location__Latitude__s;
const Longitude = bear.Location__Longitude__s;
return {
location: { Latitude, Longitude },
title: bear.Name,
description: `Coords: ${Latitude}, ${Longitude}`,
icon: ‘utility:animal_and_nature’
};
});
}
It subscribes to the ‘bearListUpdate’ event.
Now as you can see in below screenshot, when you search bears, you track their locations as well at the same time.
SFDC Arjuna 