Create a hand-on example as pass input value from parent to child component through PubSub Model LWC in Salesforce

In Lightning Web Components (LWC), the PubSub model is used when we want to communicate between components that are not directly related (not parent-child or sibling).

But for learning purposes, we can create a simple Parent → Child communication using PubSub so beginners understand how the publish–subscribe pattern works.

Below are the steps for a hands-on experience using public properties for parent-to-child communication, as per best practices in LWC.

Step 1: Create the PubSub Module

Create a new Lightning Web Component named pubsub. Delete the HTML file and update the JS file with the standard, open-source Salesforce pubsub.js code.

```
 
```
```
   const events = {};
```
```
 
```

const registerListener = (eventName, callback) => {

```
    IF (!events[eventName]) {
```
```
        events[eventName] = [];
```
```
    }
```
```
    events[eventName].push(callback);
```
```
};
```
```
 
```

const fireEvent = (eventName, payload) => {

```
    IF (events[eventName]) {
```

        events[eventName].forEach(callback => {

```
            callback(payload);
```
```
        });
```
```
    }
```
```
};
```
```
 
```
```
export { registerListener, fireEvent };
```

What this does

registerListener() → subscribe to event
fireEvent() → publish event

Step 2: Parent Component (Publisher)

The Parent component sends the input value.

🎁 Up to 99% Off Courses (Coupon)
💥 Use Promo Code: STANDARDOFFER💥
🚀 Get Free Salesforce Course Access: www.thevijaykumar.w3web.net

pubSubParent.html

```
 
```
```
   <template>
```

    <lightning-card title="Parent Component">

    <div class="slds-grid slds-wrap slds-p-around_medium">

```
 
```

          <div class="slds-col slds-size_6-of-12">

```
 
```
```
 
```
```
 
```
```
                <lightning-INPUT 
```

                    label="Enter Message"

                    onchange={handleChange}>

```
                </lightning-input>
```
```
 
```
```
                <br/>
```
```
 
```
```
                <lightning-button 
```

                    label="Send Message"

                    onclick={sendMessage}>

```
                </lightning-button>
```
```
 
```
```
 
```
```
 
```
```
          </div>
```
```
 
```
```
    </div>
```
```
 
```
```
</lightning-card> 
```
```
 
```
```
</template>
```

pubSubParent.js

```
 
```

   import { LightningElement } FROM 'lwc';

```
import { fireEvent } FROM 'c/pubsub';
```
```
 
```

export DEFAULT class PubSubParent extends LightningElement {

```
 
```
```
    messageValue = '';
```
```
 
```
```
    handleChange(event){
```

        this.messageValue = event.target.value;

```
    }
```
```
 
```
```
    sendMessage(){
```
```
 
```

        fireEvent('sendMessageEvent', this.messageValue);

```
 
```
```
    }
```
```
 
```
```
}
```

Step 2: Child Component (Subscriber)

The Child component receives the value.

pubsubChild.html

```
 
```
```
  <template>
```
```
 
```

    <lightning-card title="Child Component">

```
 
```
```
        <p STYLE="padding:10px">
```

            Received Message: {receivedMessage}

```
        </p>
```
```
 
```
```
    </lightning-card>
```
```
 
```
```
</template>
```

pubsubChild.js

```
 
```

   import { LightningElement } FROM 'lwc';

import { registerListener } FROM 'c/pubsub';

```
 
```

export DEFAULT class pubsubChild extends LightningElement {

```
 
```
```
    receivedMessage = '';
```
```
 
```
```
    connectedCallback(){
```
```
 
```

        registerListener('sendMessageEvent', this.handleMessage.bind(this));

```
 
```
```
    }
```
```
 
```
```
    handleMessage(message){
```
```
 
```
```
        this.receivedMessage = message;
```
```
 
```
```
    }
```
```
 
```
```
 
```
```
}
```

Step 3: Add Both Components to Page

app.html

```
 
```
```
   <template>
```
```
 
```

    <c-pub-sub-parent></c-pub-sub-parent>

```
 
```
```
    <br/>
```
```
 
```
```
    <c-pubsub-child></c-pubsub-child>
```
```
 
```
```
</template>
```

FAQ (Frequently Asked Questions)

What is the pub-sub model in LWC?

The Pub-Sub pattern in LWC was initially used for event communication between unrelated components on the same Lightning page. LMS allows communication between components across different pages and also between Visualforce pages and various types of Lightning components, including LWCs and Aura components.

Is LWC faster than Aura?

Yes, Lightning Web Components (LWC) are significantly faster than Aura components because LWC leverages modern web standards and browser capabilities for rendering, making it lightweight and efficient, while Aura relies on a heavier, proprietary framework that requires more software rendering. This architectural shift results in faster load times and better performance in LWC, aligning with familiar HTML/JavaScript, making it the preferred choice for new development.

What are the 5 types of flow in Salesforce?

The five core types of Salesforce Flows are Screen Flows (user-guided), Record-Triggered Flows (data-driven on record changes), Schedule-Triggered Flows (time-based automation), Platform Event-Triggered Flows (event-driven from external systems), and Autolaunched Flows (background processes, often called by other flows or Apex). These flows automate tasks from user data collection to complex backend processes, acting as a powerful declarative tool.

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

What is the pub-sub model in LWC?

Is LWC faster than Aura?

What are the 5 types of flow in Salesforce?

Related Topics | You May Also Like

Vijay Kumar