In this post we will discuss about communication between components from parent to child. For example,if on certain events in parent component, I want to pass parameter
to child component or I want to execute certain logic in child component then how will I achieve it.
Passing the property values from parent to child component
Suppose I have two components, a parent component say “testParent” and a child component say “testChild” .
In the child component, We will declare a property with @API decorator say “myName”. This means, the property can be accessed outside of this component now in the parent component. We will set default value of this property say “Salesfore Predator”.
We will pass the value to this child components property from parent ,while declaring the child component inside the parent component.
testChild.html
<template>
<lightning-card title = "Contact Details" icon- name="standard:contact">
<p>{myName}</p>
</lightning-card>
</template>testChild.js
import { LightningElement ,api} from 'lwc';
export default class TestChild extends LightningElement {
@api myName = 'Salesfore Predator';
}testParent.html
<template>
<c-test-child my-name = {chilparam} </c-test-child>
</template>Notice the case while writing the child components name inside parent component. It has to be in a kebab case, also the property’s name is to be in a kebab case only.
testParent.js
import { LightningElement,track } from 'lwc';
export default class TestParent extends LightningElement {
@track chilparam = 'Knowledge Predator';
}Now if you include the testParent inside an Aura App and preview the application, you will see that value passed from parent is displayed instead as it has overridden the child components value.
Calling Child component’s method from Parent
Suppose on click of certain event, say on click of button, We want to change the value passed to the child component in above example.
So, We will make changes to above components.
In child component we will add a method say “testChildMethod” which will recieve paramter also from parent component. Remember this method has to be public ie annoted by @api so that it can be accessed by other components. This method will display alert message and change the value of our “myName” property to “Salesfore Predator” again.
testChild.html
<template>
<lightning-card>
<lightning-button label="click me" onclick = {handleMe}></lightning-button>
</lightning-card>
</template>testChild.js
import { LightningElement ,api} from 'lwc';
export default class TestChild extends LightningElement {
@api myName = 'Salesfore Predator';
@api testChildMethod(parentParam){
alert('this is child method'+parentParam.firstname);
this.myName = 'Salesfore Predator';
}
}In parent component , We will add a button , which we will bind to a javascript function and from javascript function we will make call to child components method.
testParent.html
<template>
<c-test-child my-name = {chilparam}> </c-test-child>
<lightning-button label = 'Call Child Method' onclick={handleCall}></lightning-button>
</template>testParent.js
import { LightningElement,track } from 'lwc';
export default class TestParent extends LightningElement { handleCall(event){
var childCompVar = this.template.querySelector('c-test-child');
var sendParam = {'firstname': 'Salesforce'};
childCompVar.testChildMethod(sendParam);
}
}Notice the syntax while accessing the child component and its method in parent component javascript file.
this.template.querySelector('div') - > This returns the first div element.
this.template.querySelectorAll() - > This returns array of all div elements in the component
Reload the application. Once you click on ‘Call Child Method’ , alert will pop up which displays the paramter passed from parent component.
Once you close the alert , you wil see the property value will be changed to ‘Salesforce Predator’ again.
So , we will wrap up this post here . Stay tuned for next posts !
Knowledge Predator 