LWC: How To Communicate Between Components Using PubSub Model(Multiple Parameters)

To communicate between components that aren’t in the same DOM tree we can use a singleton library that follows the publish-subscribe pattern.

This is similar to Application Events in Aura Components. When we need communicate to another components which don't have any relationship(Parent/Child) with other component in a same page we will use Pub - Sub pattern.

In a publish-subscribe pattern, one component publishes an event. Other components subscribe to receive and handle the event. Every component that subscribes to the event receives the event.

Below Example will show how to pass MultipleParameters from one component to another component.
First we need to create one LightningWebComponent  with name pubsub to copy pubsub.js file which is shared by Salesforce.This file mandatory to implement pub-sub model.

Copy below code into pubsub.js file and save it.

Now we will create two components publishComponent and subscriberComponent and pass data from publishComponent to subscriberComponent on click of button via pub-sub pattern.

When Call Subscriber button is clicked data will show in My Subscriber Component.Both Message and Source data will be listen from My Publisher Component.

Step1: Create publishComponent.html and save below code which contains CallSubscriber button.on click of it will the pass the predefined data to subscriberComponent.
publishComponent.html 

Step2:                                                                                                                                                     

  =>In publishComponent.js first we need to import the pubsub component to fireEvent using below   code.

                                  import { fireEvent } from 'c/pubsub';
 =>Next import the CurrentPageReference to pass the pafeRef to subscriberComponent using below code.
                                 import { CurrentPageReference } from 'lightning/navigation';
 => Add below wire api to get the current page reference.                                                                                                                              @wire(CurrentPageReference) pageRef;                             
 =>When button is clicked we need to fire event using below syntax.     
                   fireEvent(this.pageRef, "typeYourEventName" , "parameter/data to pass");

In publishComponent.js save the below code which include all the above syntax to call the subscriberComponent.
publishComponent.js
Step3: In meta.xml file make isExposed as True and mention the interfaces where  you want  to show.
publishComponent.js-meta.xml

Step4: Create subscribeComponent.html and use below to show the message from the publishComponent.
subscribeComponent.html
Step5:

 =>In subscribeComponent.js  we need to import the pubsub component to register and unregister the event using below code.Add CurrentPageReference code also.
                   import { registerListener,unregisterAllListeners } from 'c/pubsub';
                   import { CurrentPageReference } from 'lightning/navigation';
 =>Add below wire api to get the current page reference.                                                                                          @wire(CurrentPageReference) pageRef;   
 =>In connectedCallback life cycle hook we need to register the event to get the data using below       code.
                   connectedCallback(){
                          registerListener("typeYourEventName","propertyToGetdata",this);
                      }
 =>In disconnectedCallback life cycle hook we need to deregister the event using below syntax.
                  disconnectedCallback(){
                         unregisterAllListeners(this);
                        }

In subscriberComponent.js save the below code which include all the above syntax.
subscriberComponent.js

LWC Local Development
CustomMultiSelectPickList using LWC
CustomMultiSelectPickList using AuraComponents
AvoidMultipleServerCalls in LighningComponents