LWC Events and Component Communication – Salesforce Platform Developer 1 Exam Guide
Why LWC Events and Component Communication Matter
Lightning Web Components (LWC) follow a component-based architecture, meaning your application is composed of many small, reusable pieces. For these pieces to function together as a cohesive application, they must be able to share data and respond to user interactions. Understanding how components communicate is critical for the Platform Developer 1 exam because Salesforce heavily tests your ability to design and debug component hierarchies, pass data between parent and child components, and handle events correctly.
Without a solid grasp of LWC events and communication patterns, you will struggle with scenario-based questions that ask you to identify the correct approach for a given parent-child or sibling relationship.
What Is LWC Component Communication?
LWC component communication refers to the mechanisms by which Lightning Web Components exchange data and notify each other of changes or user actions. There are three primary communication patterns:
1. Parent to Child – Using public properties (@api decorated properties)
2. Child to Parent – Using custom events (dispatching events from child, handling in parent)
3. Unrelated Components – Using the Lightning Message Service (LMS) or a pub-sub pattern
How It Works: Detailed Breakdown
1. Parent-to-Child Communication (@api Properties)
A parent component passes data down to a child component by setting attributes on the child's tag in the parent's HTML template. The child component exposes these attributes using the @api decorator.
Child Component (childComp.js):
import { LightningElement, api } from 'lwc';
export default class ChildComp extends LightningElement {
@api recordName;
}
Parent Component (parentComp.html):
<c-child-comp record-name={accountName}></c-child-comp>
Key points:
- The @api decorator makes a property public and reactive. When the parent changes the value, the child re-renders automatically.
- Property names in JavaScript use camelCase (recordName), but in HTML they are converted to kebab-case (record-name).
- @api properties are read-only inside the child. The child should never directly modify an @api property. If the child needs a mutable copy, it should create a local tracked property and copy the value there.
- You can also expose public methods using @api on a method, allowing the parent to call a child's method imperatively.
2. Child-to-Parent Communication (Custom Events)
When a child needs to notify the parent of something (e.g., a button click, a form submission, data change), it dispatches a custom event. The parent listens for this event using an event handler.
Child Component (childComp.js):
handleClick() {
const evt = new CustomEvent('selected', {
detail: { recordId: this.recId }
});
this.dispatchEvent(evt);
}
Parent Component (parentComp.html):
<c-child-comp onselected={handleChildSelect}></c-child-comp>
Parent Component (parentComp.js):
handleChildSelect(event) {
const selectedId = event.detail.recordId;
}
Key points:
- Custom event names must be lowercase, with no uppercase letters, no hyphens, and no underscores. Examples: 'selected', 'valuechange', 'itemremoved'.
- In the parent HTML, the handler attribute is prefixed with on: if the event name is 'selected', the attribute is onselected.
- The detail property of the CustomEvent is used to pass data from child to parent.
- By default, custom events do not bubble and are not composed. This means they only travel from the dispatching component to its direct parent. You can change this behavior by setting bubbles: true and composed: true in the event options, but this is rarely recommended.
3. Communication Between Unrelated Components (Lightning Message Service)
When two components do not have a direct parent-child relationship (e.g., they are on different regions of a Lightning page), you use the Lightning Message Service (LMS).
Steps:
- Create a Lightning Message Channel in your metadata (XML file in the messageChannels folder).
- In the publishing component, import publish and the message channel, then call publish(this.messageContext, MESSAGE_CHANNEL, payload).
- In the subscribing component, import subscribe and the message channel, then call subscribe(this.messageContext, MESSAGE_CHANNEL, callbackFunction).
- Use @wire(MessageContext) to get the message context.
Key points:
- LMS works across LWC, Aura, and even Visualforce components on the same Lightning page.
- LMS is the Salesforce-recommended approach for unrelated component communication.
- Always unsubscribe in the disconnectedCallback to avoid memory leaks.
4. Event Propagation: Bubbling and Composed
Understanding event propagation is essential for the exam:
- bubbles: false, composed: false (default) – The event only reaches the immediate parent. It does not cross the shadow DOM boundary.
- bubbles: true, composed: false – The event bubbles up through the component's own shadow tree but stops at the shadow DOM boundary (the host element).
- bubbles: true, composed: true – The event bubbles up and crosses shadow DOM boundaries, reaching ancestors higher in the DOM tree. Standard DOM events like 'click' behave this way.
For the exam, remember: the default behavior of custom events is non-bubbling, non-composed.
5. @api Methods (Parent Calling Child Methods)
A parent can imperatively call a method on a child component if that method is decorated with @api.
Child Component:
@api
refreshData() {
// logic to refresh
}
Parent Component:
this.template.querySelector('c-child-comp').refreshData();
This is useful for actions like resetting a form, triggering a refresh, or focusing an input.
Summary Table of Communication Patterns
| Direction | Mechanism | Key Decorator/API |
| Parent → Child | Public properties | @api property |
| Parent → Child | Public methods | @api method + querySelector |
| Child → Parent | Custom events | new CustomEvent + dispatchEvent |
| Unrelated | Lightning Message Service | publish / subscribe |
Exam Tips: Answering Questions on LWC Events and Component Communication
1. Identify the relationship first. Before choosing a mechanism, determine if the components are parent-child or unrelated. Parent-child uses @api and events. Unrelated components use LMS.
2. Remember the naming conventions. Custom event names must be all lowercase with no special characters. In HTML, handlers are prefixed with on. JavaScript properties use camelCase; HTML attributes use kebab-case.
3. Know the defaults. Custom events default to bubbles: false and composed: false. If a question asks about an event not reaching a grandparent, this is likely the reason.
4. @api properties are read-only in the child. If a question presents code where a child directly modifies an @api property, that code is incorrect. The child should copy the value to a local property first.
5. data flows down, events flow up. This is the fundamental principle. Data passes from parent to child via @api. Notifications pass from child to parent via custom events. If a question reverses this pattern, the answer is likely wrong.
6. Watch for event.detail. When a child sends data to a parent through a custom event, the data is placed in the detail property. In the parent handler, you access it via event.detail. Questions may test whether you know to use event.detail vs. event.target vs. event.data (event.data does not exist in this context).
7. LMS requires a message channel metadata file. If a question involves cross-component communication without parent-child relationships and mentions needing a metadata XML file, LMS is the answer.
8. Distinguish between @api, @track, and @wire. Exam questions may mix these decorators. @api is for public properties/methods, @track was used for reactive private properties (now automatic in recent API versions for primitives), and @wire is for connecting to Apex or Lightning Data Service.
9. Public method invocation requires querySelector. If a parent needs to call a child's @api method, it must use this.template.querySelector() to get a reference to the child component first.
10. Practice reading code snippets. Many exam questions present partial code and ask you to identify the correct missing piece (e.g., the correct event handler attribute name, the correct decorator, or the correct way to dispatch an event). Read every line carefully, checking for correct syntax, naming conventions, and decorator usage.
By mastering these communication patterns and their nuances, you will be well-prepared to handle any LWC Events and Component Communication question on the Salesforce Platform Developer 1 exam.