Salesforce LWC Communication: Parent and Child Components Explained

Lightning Web Components are often built as small, reusable components rather than one large component.

Once multiple components work together, developers need a clear way to pass information between them.

The communication pattern depends on the relationship between the components.

Parent to Child Communication

A parent component can pass data to a child component through public properties.

For example:

import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
@api recordName;
}

The parent can provide the value when using the child component:

record-name={accountName}>

This is useful when the child component needs information from its parent.

Child to Parent Communication

A child component can communicate with its parent by dispatching a custom event.

For example:

this.dispatchEvent(
new CustomEvent('selected', {
detail: this.recordId
})
);

The parent can listen for the event:

onselected={handleSelected}>

This creates a clear communication path:

Parent
↓ data
Child
↑ event
Parent
Keep Components Focused

If components need to share too much internal state, it may indicate that the design needs to be reconsidered.

A component should ideally have a clear responsibility and expose only the information other components actually need.

This makes the code easier to understand and reuse.

Don't Put Everything in One Component

A common beginner approach is creating one large LWC that handles data retrieval, UI rendering, events, validation, and multiple business processes.

Breaking the interface into smaller components can make development and testing easier.

For example:

Account Page
├── Account Header
├── Contact List
└── Opportunity Summary

Each component can focus on its own responsibility.

Test the Communication

When testing LWC components, verify both directions of communication.

Check that:

Parent values reach the child correctly
Child events contain the expected data
The parent responds correctly
Components behave properly when values are empty or changed
Final Thought

Good LWC architecture is not only about writing JavaScript and HTML. It is also about deciding how components should communicate.

Using public properties for parent-to-child communication and custom events for child-to-parent communication can keep component relationships clear and manageable.

For teams building custom Salesforce interfaces, Salesforce development services can support LWC, Apex, and Salesforce application development.