Parent to Child Communication in Lightning Web Components (LWC) – Complete Guide with Examples

Parent to Child communication in Lightning Web Components (LWC) allows a parent component to send data to a child component using a clean, one-way data flow.

1. What is Parent → Child Communication?

Parent → Child communication means the parent component sends data to the child component.

• The parent owns the data
• The child only receives and uses the data
• Data flow is one-way (Parent → Child)
• Communication is done using the @api decorator
• Parent passes data using HTML attributes
• HTML attributes must be kebab-case
• Child variables must be camelCase
• PascalCase does not work
• @api data is read-only in the child

2. How Parent → Child Communication Works

The parent component passes data in HTML, and the child component receives it using a public @api variable.

<c-child-component message="Hello Child"></c-child-component>

3. Important Naming Rule

HTML attributes and JavaScript variables follow different naming conventions.

Parent HTML Attribute	Child JavaScript Variable
child-variable	@api childVariable

Incorrect Examples

<ChildVariable={message}>

@apiChildVariable;

Correct Examples

<c-api-child-component child-variable={message}></c-api-child-component>

@api childVariable;

4. Final Working Example

Parent Component

Parent HTML

<template> <lightning-card title="API - Parent to Child Communication"> <div class="slds-p-horizontal_small"> <c-api-child-component child-variable={message}> </c-api-child-component> <br/> <lightning-button label="Click Me" variant="brand" onclick={handleClick} class="slds-m-top_small"> </lightning-button> </div> </lightning-card> </template> 

Parent JavaScript

import { LightningElement } from 'lwc'; export default class ApiParentComponent extends LightningElement { message = 'Message from Parent'; handleClick() { this.message = 'Button was clicked!'; } } 

Child Component

Child JavaScript

import { LightningElement, api } from 'lwc'; export default class ApiChildComponent extends LightningElement { @api childVariable; } 

Child HTML

<template> <lightning-card> <div class="slds-p-horizontal_small"> <p>Child - {childVariable}</p> </div> </lightning-card> </template>