Why This Is Useful
The moment you build anything beyond a single component, you need components talking to each other. Passing data from a parent down to a child is the most common version of that, and it’s built right into LWC with the @api decorator.
Four steps, and none of them are difficult.
Step 1: The Child Declares What It Accepts
In your child component’s JavaScript, import api and decorate a property with it:
// childComponent.js
import { LightningElement, api } from 'lwc';
export default class ChildComponent extends LightningElement {
@api messageFromParent;
}@api makes that property public. Without it the property is private and the parent cannot touch it, no matter what you do.
Step 2: The Child Displays It
<!-- childComponent.html -->
<template>
<p>The parent said: {messageFromParent}</p>
</template>Step 3: The Parent Has Something To Send
// parentComponent.js
import { LightningElement } from 'lwc';
export default class ParentComponent extends LightningElement {
myMessage = 'Hello from the parent!';
}Step 4: The Parent Passes It Down
<!-- parentComponent.html -->
<template>
<c-child-component message-from-parent={myMessage}></c-child-component>
</template>And that’s it. The child renders “The parent said: Hello from the parent!”
The Bit That Catches Everyone
Look carefully at step 4. The property is messageFromParent in JavaScript but message-from-parent in the HTML.
That’s camelCase in JavaScript, kebab-case in the markup, and it is absolutely the number one reason parent-to-child communication silently doesn’t work. Write messageFromParent={myMessage} in your template and nothing happens. No error, no warning, just an empty value and you staring at the screen.
Same rule applies to the component tag itself: childComponent becomes <c-child-component>.
The other thing worth knowing: this is reactive. Change myMessage in the parent and the child re-renders automatically. You don’t have to do anything to make that happen.
Going the other way, child to parent, uses Custom Events instead. I’ve covered that in my post on custom events and the api decorator. Full docs on public properties are over here.
Get Coding With The Force Merch!!
We now have a redbubble store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.
Get Shirts Here!
Get Cups, Artwork, Coffee Cups, Bags, Masks and more here!
Check Out More Coding With The Force Stuff!
If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!
Youtube
Patreon
Github
Facebook
Twitter
Instagram
Salesforce Development Books I Recommend
Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps
Good Non-SF Specific Development Books:
Clean Code
Clean Architecture
