Free tools Windows power users keep installed
One-click scans. No signup required.
In Lightning Web Components (LWC), a parent passes data down through a child’s public @api properties, and a child reports actions or requested changes upward with DOM events. Use an @api method when the parent needs to command a child, and Lightning Message Service (LMS) when components do not share a DOM tree. Keep ownership of state with the component that owns it, and check that the Salesforce container supports LMS before relying on it.
How do parent and child components communicate in LWC?
Choose a communication method based on the relationship and direction of the message. Salesforce’s model is one-way: an owner supplies values to descendants; a child signals a requested change, and the owner decides whether to update its state. This avoids giving a child control over data it does not own. See Salesforce’s Data Flow guidance and Communicate with Events.
As an Amazon Associate I earn from qualifying purchases.
| Situation | Use | Key constraint |
|---|---|---|
| Parent supplies configuration or data to a child | Public @api property |
Child treats supplied objects and arrays as read-only. |
| Parent asks a child to perform an imperative action | Public @api method |
Expose only the methods that belong in the child’s public API. |
| Child reports a selection, action, or requested change | DOM event, usually CustomEvent |
Use the least propagation needed; keep the event payload public and clear. |
| Components do not share a DOM tree, or communication crosses technologies | Lightning Message Service | Verify support for the Salesforce experience and participants involved. |
How do I pass data from a parent to a child in LWC?
Use a public property for data
Declare a field with @api in the child, then set it through the child element in the parent template. JavaScript property names use camel case; HTML attributes use kebab case. For example, the JavaScript field itemName is written as item-name in markup. Salesforce documents this pattern in Set Properties on Children and Decorators.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
// 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 example shows the API shape; it is not a tested implementation. Prefer clear, specific inputs—especially primitive values—when practical, so a child’s accepted inputs are easy to understand.
#1 Best Overall
Keep ownership of objects and arrays
A value passed from an owner is not an invitation for the child to mutate the owner’s state. Treat supplied objects and arrays as read-only. If the child needs to propose a change, it should emit an event and let the owner decide how to update its state. When making a local change to an object or array, work on a copy rather than changing the supplied reference. Salesforce explains this ownership model in Data Flow.
Use a public method for a command
When the parent needs a child to perform an imperative action—such as a player’s play() or pause() operation—expose a method with @api. The parent can call that method on the child element it owns. A public method is part of the component’s API, so make it deliberate rather than exposing internal implementation details. See Salesforce’s Call Methods on Children guide.
How does a child send data to its parent in LWC?
Dispatch a DOM event
A child commonly uses CustomEvent to report a user selection or propose a state change. Put the value the parent needs in detail; primitive payloads are usually the simplest contract. The parent can listen declaratively in its template and handle the event in its JavaScript class.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware match// child.js
this.dispatchEvent(new CustomEvent('select', {
detail: this.selectedId
}));<!-- parent.html -->
<c-child onselect={handleSelect}></c-child>The event name and payload shape are a contract between child and parent. If the payload is an object or array, send a copy when the receiver should not be able to mutate the child’s internal state by reference. The parent receives the proposal; it remains responsible for deciding whether and how to change owner-controlled data. Salesforce’s Communicate with Events and Handle Events cover dispatch and handling.
Keep event propagation narrow
By default, bubbles and composed are both false. Start with that least-permissive scope and widen it only when the design requires it. Setting both to true lets an event bubble through ancestors and cross shadow boundaries, making it visible more broadly and turning it into a wider public contract. That can create name collisions and make components harder to evolve independently. See Salesforce’s Configure Event Propagation and Events Best Practices.
Shadow DOM also encapsulates a component’s internals: the event’s target can be retargeted outside the shadow boundary. Consumers should use the event’s public payload rather than reaching into child internals. Declarative template listeners are generally preferable. If a listener must be added imperatively, keep the same handler reference for removal; repeatedly calling .bind() creates new function instances and can prevent removal.
How do sibling LWC components communicate?
If components are not in the same DOM tree, use Lightning Message Service rather than trying to turn an unrelated component into a parent-child relationship. Declare a Lightning message channel, then publish and subscribe through the message service. LMS can also connect LWC, Aura, and Visualforce participants in supported Salesforce experiences. Salesforce identifies it as the preferred approach for communication across the DOM: Communicate Across the DOM and Lightning Message Service.
Confirm support for the actual container before choosing LMS. Salesforce documents support in Lightning Experience standard and console navigation, Salesforce mobile for Aura and LWC (not Visualforce pages), and Aura- and LWR-based Experience Builder sites. Its limitations guidance says LMS does not work with Salesforce Tabs + Visualforce sites or Visualforce pages in Experience Builder sites. See Message Service Limitations.
The older pubsub utility is a fallback only for containers that do not support LMS. Salesforce describes it as page-limited, requiring manual unregistration, and no longer officially supported or actively maintained; it is not an equivalent first choice.
Quick Recap
A quick rule for choosing
- Data or configuration flowing from owner to child: public
@apiproperty. - Imperative command from parent to child: public
@apimethod. - Selection, action, or proposed change flowing from child to owner: DOM event, with minimal propagation.
- Communication between components outside the same DOM tree: LMS, after checking container support.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
