Intermediate 20 min read

Component Communication

By the end of this lesson, you'll be able to:

  • Describe, at a high level, how a parent passes data down to a child component
  • Describe, at a high level, how a child notifies a parent of something
  • Recognize @api and CustomEvent as the two core mechanisms

Prerequisites: "Data Binding and Directives"

Two Directions of Communication

Components communicate in two directions:

  • Parent → child — the parent passes data down via a public property on the child, marked with the @api decorator.
  • Child → parent — the child fires a CustomEvent that the parent listens for.

This lesson introduces both at a basic level; Module 5 is the full deep dive, including event propagation, sibling communication, and Lightning Message Service.

A First Look at @api

// childCard.js
import { LightningElement, api } from 'lwc';

export default class ChildCard extends LightningElement {
    @api recordName;
}
<!-- inside the parent's template -->
<c-child-card record-name="Acme Corp"></c-child-card>

Note the attribute in the parent's markup is written in kebab-case (record-name), even though the JS property is camelCase (recordName) — LWC handles that translation automatically.

A First Look at CustomEvent

// childCard.js
handleSelect() {
    this.dispatchEvent(new CustomEvent('select', { detail: this.recordName }));
}
<!-- inside the parent's template -->
<c-child-card onselect={handleChildSelect}></c-child-card>

The child fires a custom select event carrying data in detail; the parent listens for it with onselect, exactly the same pattern used for standard DOM events like onclick.

Why This Matters in Real Projects

Components that can't communicate can't compose into real applications — every non-trivial UI you'll build for the rest of this course relies on parent/child data flowing down and events flowing back up.

Exercise

A child component needs to receive an accountId from its parent. Which decorator makes a property settable from the parent's markup?

Show hint

It's the same decorator used in this lesson's example.

JAVASCRIPT

Exercise

Challenge: a child component needs to tell its parent "the user clicked delete" along with which record was clicked. Describe, without full code, the mechanism it should use.

Show hint

Recall the child-to-parent direction.

JAVASCRIPT

Component Communication Quiz

1. Which decorator allows a parent to pass a value into a child component?

2. How does a child component notify its parent that something happened?

3. A JS property recordName is referenced in the parent's markup as record-name.

4. Where does event data typically get carried when a child dispatches a CustomEvent?

5. Is this lesson's treatment of component communication the full, complete picture?

Log in to submit the quiz and save your score.

My Notes

Log in to keep private notes on this lesson.

Questions about this lesson

No questions yet — be the first to ask.

Log in to ask a question about this lesson.

Summary

A first, intentionally light look at how components talk to each other — enough to build simple parent/child relationships now, with the full mechanics (event propagation, sibling communication, Lightning Message Service) covered in Module 5.

Log in to track progress
❬ Previous Next ❭