Parent-to-Child Communication with @api

Module 3 introduced @api for a simple string property. @api can expose two kinds of things on a child component: properties (passive data, this lesson) and methods (imperative actions, Lesson 2).

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

export default class ContactCard extends LightningElement {
    @api contact;
}

@api properties aren't limited to strings — an entire object or array can be passed down:

<!-- parent's template -->
<c-contact-card contact={selectedContact}></c-contact-card>

// contactCard.js
@api contact; // receives the full object: { Id, Name, Email, ... }

<!-- contactCard.html -->
<p>{contact.Name}</p>
<p>{contact.Email}</p>

When the parent reassigns the object it's passing down — using the immutable update pattern from Module 4 — the child's @api property updates, and the child's template re-renders correctly:

// In the parent, after an edit:
this.selectedContact = { ...this.selectedContact, Email: newEmail };

Because this creates a new object reference rather than mutating the old one, the child genuinely receives a fresh value and re-renders — exactly the same reactivity principle from Module 4, now spanning a parent/child boundary.

Almost every real LWC application is a tree of components passing data downward this way — a list component passing individual records to row components, a form passing field values to input sub-components, and so on.