For a parent component to communicate with child component, A child component exposes a property or method to make that variable publicly available. Then the parent can update the child’s public property or call child’s function.
To make a property or method public, LWC component will be annotated with @api. To expose a public method, decorate it with @api. Public methods are part of a component’s API. To communicate down the containment hierarchy, owner and parent components can call JavaScript methods on child components.
In the child to parent communication you can see in child component @api childName = ‘’ is declared. This is a small example of Parent to child communication. In parent component, when the child component is called, the @api annotated property is used to send information to child component.
Today we will see how components methods communicate down the hierarchy i.e from parent to child using a small example. We will have 2 numbers in parent component which are passed to child. We will call a child method to add those 2 numbers and display the sum in child component. Just for reference Parent component name is Guru and Child component name is Chela (I have components names parent and child with previous examples).
guru.html (Parent component)
<template>
<div class="slds-theme">
<lightning-card title={childName}>
<lightning-input type="number"
label="Enter number A:"
value={value1}
onchange={handleValue1Change}
></lightning-input>
<br/>
<lightning-input type="number"
label="Enter number B:"
value={value2}
onchange={handleValue2Change}
></lightning-input>
<br/>
<c-chela value1={value1} value2={value2}></c-chela>
</lightning-card>
</div>
</template>
guru.js (Parent component)
import { LightningElement } from 'lwc';
export default class Guru extends LightningElement {
value1 = 0;
value2= 0;
handleValue1Change(event){
this.value1 = event.target.value;
this.template.querySelector('c-chela').addNumbers();
}
handleValue2Change(event){
this.value2 = event.target.value;
this.template.querySelector('c-chela').addNumbers();
}
}
Here, We have mentioned the child component in parent component and chela.js (Child component) and if you see this.template.querySelector(‘c-chela’).addNumbers(); in guru.js file, we are calling chela component’s addNumbers method from parent component guru.js
chela.html (Child component)
<template>
<div class="slds-theme">
Sum of 2 parent numbers {value1} + {value2} is {sum}
</div>
</template>
chela.js (Child component)
import { LightningElement, api } from 'lwc';
export default class Chela extends LightningElement {
@api value1 = 0;
@api value2 = 0;
sum = 0;
@api
addNumbers(){
setTimeout(() => {
// adding 2 parent component numbers value1 and value2
this.sum = parseInt(this.value1) + parseInt(this.value2);
}, 300);
}
}
Output:
Akhil Kulkarni 