In this blog, we are explaining how we can pass data or multiple parameters' from Child component to Parent component in LWC.
parentCmp.html
<template>
<div>
<strong>I am inside Parent</strong>
<br/>
<c-child-cmp onsampleevent={handleSampleEvent}
message="Msg from Parent"
pageno="33">
</c-child-cmp>
</div>
</template>
parentCmp.js
import { LightningElement } from 'lwc';
export default class ParentCmp extends LightningElement {
handleSampleEvent(event){
// Access sample customevent`s child detail data
const message = event.detail.message;
const pageNo = event.detail.pageno;
const name = event.detail.staticVal;
alert('Event Handled- '+ message +' '+pageNo+' '+name);
}
}
childCmp.html
<template>
<strong>I am inside Child</strong>
<p> message {message} </p>
<p> pageno {pageno} </p>
<p> Date is {date} </p>
<lightning-button
variant="brand"
label="Create Event"
title="Create Event"
onclick={handleEvent}>
</lightning-button>
</template>
childCmp.js
import { LightningElement, api, track } from 'lwc';
export default class ChildCmp extends LightningElement {
@api message ;
@api pageno;
@track date = new Date();
handleEvent(){
// create event
const events = new CustomEvent(
'sampleevent',
{
detail : {
message : this.message,
pageno : this.pageno,
staticValue : "SampleData"
}
}
);
// dispatch event
this.dispatchEvent(events);
}
}
Subscribe blog for More updates !!!
Read More: WhatsApp on Salesforce Integration in 5 Steps
Which Salesforce API Do I Use in Integration?
When To Use Salesforce REST API
When To Use Salesforce SOAP API
When To Use Salesforce Bulk API
Latest Salesforce Interview Questions and Answers: