A small example of custom event & dispatch event where we define a custom event in child component and passing values from child component to parent component in — LWC

[vijayk3327]

In this post we are going to learn about How to define a custom event in child lightning web component and passing values from child component to parent component in — LWC

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component : lwcParent.html

`

    <div class="slds-wrap slds-grid">
        <div class="slds-col slds-size_12-of-12 slds-p-horizontal--small slds-m-bottom--medium">
        
            <h3><b>lwcChild Component</b></h3>
            <c-lwc-child ondemoevent={handleChange}></c-lwc-child>

             <h3><b>lwcParent Component</b></h3>
             <b style="color:brown; margin-top:15px;">The Name Value Is:-</b> {currentVal}
        </div>
    </div>

`

Step 2:- Create Lightning Web Component : lwcParent.js
import {LightningElement,api} from 'lwc'; export default class LwcParent extends LightningElement { @api currentVal; handleChange(event){ this.currentVal=event.detail; //window.console.log('fldInp# ' + this.nameInp); } }

Step 3:- Create Lightning Web Component : lwcParent.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> <target>lightning__Tab</target> </targets> </LightningComponentBundle>

Step 4:- Create Lightning Web Component : lwcChild.html

<template> <div class="slds-wrap slds-grid"> <div class="slds-col slds-size_12-of-12 slds-p-horizontal--small slds-m-bottom--medium"> <lightning-input type="text" label="Name" name="name" onchange={handleChangeName}></lightning-input> </div> </div> </template>

Step 5:- Create Lightning Web Component : lwcChild.js

` import { LightningElement,api } from 'lwc';

export default class LwcChild extends LightningElement {
@api nameInp;
handleChangeName(event){
this.nameInp = event.target.value;
const myDemoEvent = new CustomEvent('demoevent',{
detail:this.nameInp
});
this.dispatchEvent(myDemoEvent);
//window.console.log('nameInpBBB' + this.nameInp);
}

}`

→ Get source code live demo link:-