Hello friends, today we will call Parent method with/without parameters from Child component method. Many time we need to invoke Parent method to pass parameters. In this we fire custom event from child and get by parent component.
Lets start…
ParentLwc.Html : We show two fields here whoch values comes from child component.
<template>
<div class="slds-tabs_card">
<div class="slds-page-header">
<div class="slds-page-header__row">
<div class="slds-page-header__col-title">
<div class="slds-media">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-opportunity">
<lightning-icon icon-name="standard:recipe" alternative-text="recipe" title="recipe"></lightning-icon>
</span>
</div>
<div class="slds-media__body">
<div class="slds-page-header__name">
<div class="slds-page-header__name-title">
<h1>
<span>Call Parent Method From Child Component LWC</span>
<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <br/>
<lightning-card variant="Narrow" title="Parent Component" icon-name="standard:account">
<div class="slds-p-horizontal_small">
<h1>Name : {Name}</h1>
<h1>City : {City}</h1>
</div>
</lightning-card>
<br/>
<!-- Child Component --->
<c-child-lwc onchildmethod={callFromChild}></c-child-lwc>
<!---------------------->
</template>
ParentLwc.Js : We create a method which invoke by child method.
import { LightningElement } from 'lwc';
export default class ParentLwc extends LightningElement {
Name;
City;
callFromChild(event){
this.Name = event.detail.Name;
this.City = event.detail.City
console.log(JSON.stringify(event.detail));
}
}
parentLwc.js-meta.xml :
<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>51.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
ChildLwc.Html : Here we create two input fields and a button . On clicking this button child method will call and value pass to parent by custom event.
<template>
<lightning-card variant="Narrow" title="Child Component" icon-name="standard:contact">
<div class="slds-p-horizontal_small">
<div class="slds-p-around_medium lgc-bg">
<lightning-input type="text" label="Name" onchange={handleName} value={Name}></lightning-input>
</div>
<div class="slds-p-around_medium lgc-bg">
<lightning-input type="text" label="City" onchange={handleCity} value={City}></lightning-input>
</div>
<!-- call child method -->
<div class="slds-p-around_medium lgc-bg" style="text-align: end;">
<lightning-button variant="brand" label="Call Child" title="Call Child" onclick={callParent} class="slds-m-left_x-small"></lightning-button>
</div>
</div>
</lightning-card>
</template>
ChildLwc.Js : Here we create a method in which first we create a json and then after we will pass this to parent component by custom event.
import { LightningElement } from 'lwc';
export default class ChildLwc extends LightningElement {
Name;
City;
handleName(event){
this.Name = event.detail.value;
}
handleCity(event){
this.City = event.detail.value;
}
callParent(event){
let paramData = {Name:this.Name, City:this.City};
let ev = new CustomEvent('childmethod',
{detail : paramData}
);
this.dispatchEvent(ev);
}
}
What’s your Reaction?
+1
8
+1
1
+1
1
+1
1
+1
1
+1
2
Total views : 1113313