Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
In Lightning Web Components (LWC), use a public @api property to pass data from a parent to a child, a public @api method when the parent needs to command a child, and a DOM event when a child needs to report something to its owner. For components outside the same DOM tree, use Lightning Message Service (LMS) when the Salesforce container supports it. Keep state with its owner: children request changes rather than mutating parent-owned data.
How to choose an LWC communication method
| Situation | Use | Why |
|---|---|---|
| A parent supplies data or configuration to a child | Public @api property |
Declarative one-way data flow keeps ownership clear. Treat supplied objects and arrays as read-only. |
| A parent asks a child to perform an action | Public @api method |
The child exposes an explicit command as part of its public API. |
| A child reports a selection, action, or requested change | DOM or custom event | Events communicate upward; keep their propagation as narrow as possible. |
| Components do not share a DOM tree, or communication spans technologies | Lightning Message Service | LMS provides publish-subscribe communication where the Salesforce container supports it. |
For direct parent-child communication, do not use LMS as a substitute for a property, method, or event. Salesforce describes one-way data flow: the owner supplies values to descendants, and a child signals a requested change back to the owner. Salesforce’s data-flow guidance explains how this keeps state ownership clear and avoids side effects.
How do I pass data from a parent to a child in LWC?
Expose a public property
Add @api to a field in the child’s JavaScript class, then set that property on the child element in the parent template. The property name is camelCase in JavaScript and kebab-case in markup: itemName becomes item-name.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstall// child.js
import { LightningElement, api } from 'lwc';
export default class Child extends LightningElement {
@api itemName;
}<!-- parent.html -->
<c-child item-name="Example"></c-child>This illustrates the API shape; it is not a tested implementation. Prefer specific primitive properties where practical, so the child’s accepted inputs are easy to understand. For the public-property pattern, see Set Properties on Children.
#1 Best Overall
Keep supplied objects and arrays read-only
The parent owns the value it passes down. A child should not mutate a parent-owned object or array. If the child needs to propose an edit, it can send an event and let the owner decide whether and how to update its state. When a child needs to work with a mutable copy, copy the object or array rather than changing the shared value. See Salesforce’s data-flow guidance.
How can a parent command a child?
When a parent needs a child to perform an imperative action—such as playing or pausing media—expose a method with @api on the child. The parent can select the child element it owns and call that method. A public method is part of the child’s API, so expose only commands the parent is meant to use.
Salesforce documents this pattern in Call Methods on Children. Choose a method for a command, not for ordinary data that can be supplied declaratively through a public property.
How does a child send data to its parent in LWC?
Dispatch an event and handle it in the parent
A child reports a selection or proposes a state change by dispatching a CustomEvent. The parent listens on the child element in its template and handles the event in its JavaScript class. Put data intended for the parent in event.detail; primitive payloads are usually easiest to reason about.
// child.js
this.dispatchEvent(new CustomEvent('select', {
detail: this.selectedId
}));<!-- parent.html -->
<c-child onselect={handleSelect}></c-child>If the event carries an object or array, send a copy so the receiver cannot mutate the child’s internal state by reference. The event name and payload shape are a contract between the components. Salesforce’s event overview covers custom events and communication between components.
Keep event propagation restricted
Both bubbles and composed default to false. Start with those defaults and enable broader propagation only when the use case requires it. An event configured with bubbles: true and composed: true can cross shadow boundaries and reach more ancestors, making its name and payload a wider public API contract. Narrow events are less disruptive and less likely to collide with unrelated event names. See Configure Event Propagation and Events Best Practices.
Shadow DOM encapsulation also affects what a listener sees: an event’s target can be retargeted outside the component’s shadow boundary. Use the public event payload rather than reaching into a child’s internal DOM or implementation. Declarative template listeners are generally preferable; if you add a listener imperatively, retain the same handler reference for removal. Repeatedly calling .bind() creates new function instances and can prevent removal. See Handle Events.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →How do sibling or unrelated LWC components communicate?
When components do not share a DOM tree, use Lightning Message Service rather than trying to route a direct child event through unrelated components. LMS uses a message channel with publishers and subscribers, and can connect LWC, Aura, and Visualforce participants in supported Salesforce experiences. Salesforce describes it as the easiest way to communicate between components outside the same DOM tree in Communicate Across the DOM.
- Declare a Lightning message channel. The channel defines the message contract consumers and publishers use.
- Publish from the component with information to share. Use the Lightning Message Service API and the channel.
- Subscribe in the component that needs the information. Unsubscribe when appropriate as the component’s lifecycle ends.
The LMS workflow and API are documented in Lightning Message Service. Verify the actual Salesforce experience and participant types before choosing it: support is not universal. Salesforce documents supported environments and limitations in Message Service Limitations.
Where LMS is supported—and where it is not
Salesforce documents LMS support for Lightning Experience standard and console navigation, Salesforce mobile for Aura and LWC (not Visualforce pages), and Aura- and LWR-based Experience Builder sites. The limitations documentation says LMS does not work with Salesforce Tabs + Visualforce sites or Visualforce pages in Experience Builder sites. Check the container your components actually run in, especially when Visualforce is involved.
Why the older pubsub utility is not the default
The older pubsub utility is a fallback only for containers that do not support LMS. Salesforce describes it as page-limited, requiring manual unregistering, and no longer officially supported or actively maintained. Prefer LMS where supported rather than treating the two approaches as equivalent.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick Recap
A practical decision rule
- Parent to child, data: use a public
@apiproperty. - Parent to child, command: use a deliberate public
@apimethod. - Child to parent: dispatch an event with the data the owner needs.
- Outside the shared DOM tree: use LMS after confirming container support.
