How to Write LWC in Salesforce? & Understanding Component Communication in LWC

Lightning Web Components (LWC) have upgraded the way developers build dynamic user interfaces in Salesforce. While tools like Flows handle backend automation and process orchestration, LWCs bring those processes closer to end users with rich, responsive UI components.

In our earlier blog on Flows in Salesforce, we explored how Flows efficiently automate business processes. But what happens on the UI layer when you have multiple components that need to “talk” to each other?

That’s where component communication in LWC comes in. In this guide, we will break down the different types of communication between LWC components, explain when to use each, and discuss why mastering them is crucial for building scalable Salesforce apps.

 making it lightweight and high-performing compared to the older Aura components.

With LWC, you write components using:

• HTML – for the template and layout

• JavaScript – for business logic and reactive data

• CSS – for styling

  
  

How to Write Your First LWC in Salesforce

Here’s a simple guide to create your first Lightning Web Component:

Step 1: Set up your environment

• Install Salesforce CLI

• Install Visual Studio Code (VSCode) and the Salesforce Extension Pack

Step 2: Create a Salesforce DX project

bash

sfdx force:project:create -n lwcDemo

Step 3: Create your LWC In VSCode terminal:

bash

CopyEdit

sfdx force:lightning:component:create --type lwc --componentname helloWorld --outputdir force-app/main/default/lwc

Step 4: Add code to your component

helloWorld.html

html

<template>
    <h1>Hello from LWC!</h1>
</template>

helloWorld.js

javascript

import { LightningElement } from 'lwc';
export default class HelloWorld extends LightningElement {}

Step 5: Deploy to org

bash

CopyEdit

sfdx force:source:deploy -p force-app

Now, add your component to a Lightning App page using the Lightning App Builder.

Types of Communication in LWC

One of the most common challenges developers face is communication between components in LWC.Let’s explore the types:

1. Parent to Child Communication (Using Public Properties)

You can expose variables in the child component using the @api decorator. Example:

javascript

CopyEdit

// childComponent.js
import { LightningElement, api } from 'lwc';
export default class ChildComponent extends LightningElement {
    @api message;
}

html

CopyEdit

<!-- parentComponent.html -->
<c-child-component message="Hello Child!"></c-child-component>

This way, the parent passes data directly to the child.

2. Child to Parent Communication (Using Custom Events)

Child components can notify parents using events.

javascript

CopyEdit

// childComponent.js
handleClick() {
    const event = new CustomEvent('notify', { detail: 'Data from Child' });
    this.dispatchEvent(event);
}

html

CopyEdit

<!-- parentComponent.html -->
<c-child-component onnotify={handleNotify}></c-child-component>

javascript

CopyEdit

// parentComponent.js
handleNotify(event) {
    console.log(event.detail); // 'Data from Child'
}

This is an effective way for child components to send data or signals up to the parent.

3. Communication Between Unrelated Components (Using Lightning Message Service)

For communication between sibling components or components on different DOM trees, use

Lightning Message Service (LMS).

• Define a message channel in force-app/main/default/messageChannels/.

• Use publish and subscribe APIs from LMS to exchange data.

  
  

This is powerful when components don’t share a direct relationship.

4. Using Pub/Sub (For Components on the Same Page)

Before LMS, developers often used a Pub/Sub module to broadcast and listen for events between sibling components. While LMS is now preferred, Pub/Sub remains useful in certain scenarios.

Summary

Lightning Web Components make building Salesforce UIs faster and more scalable. Understanding component communication in LWC helps you:

• Build modular applications

• Ensure components interact seamlessly

• Improve code maintainability

  
  

Key communication types in LWC:

• Parent to Child: Using @api

• Child to Parent: Using custom events

• Unrelated Components: Using Lightning Message Service

• Sibling Components: Using Pub/Sub

  
  

Need help mastering Lightning Web Components?

At Cloud Science Labs, we help teams master Lightning Web Components, from building clean, scalable UIs to managing complex parent-child communications. Contact us to accelerate your LWC journey.

Reach out to us at digital@cloudsciencelabs.com to get started.