EP-15 | Use Custom Events to pass multiple parameters between LWC

EP-15 | Use Custom Events to pass multiple parameters between LWC | LWC Stack ☁️⚡️

Kapil June 10, 2021

LWC Stack is Lightning Web Component tutorial series by Salesforce MVP Kapil Batra. In this series you will find LWC tutorials from beginner to intermediate level.

So if you are working on it or planning to learn LWC then this video series is for you. Let's learn and grow together !

Please check complete code below from LWC Stack EP-15

Parent HTML

<template>
    <lightning-card title="I am Listening with Parameters" icon-name="utility:user">
        <div class="slds-var-m-around_medium">
            Default Message : {msg} <br/><br/>
        Count of Clicks : {count}
        <c-child-Component-Custom-Eventwith-Data onincreasecount={handleEventChange}>

        </c-child-Component-Custom-Eventwith-Data >
        </div>
    </lightning-card>
</template>

Parent JS

import { LightningElement } from 'lwc';

export default class ParentComponentCustomEventwithData extends LightningElement {
    endValue = 0;
    count = 1;
    msg = 'Default Message';
    handleEventChange(event) {
        this.endValue = event.detail.endValue;
        this.msg = event.detail.msg;
        if(this.count < this.endValue)
        this.count = this.count + 1;
    }
}

Child HTML

<template>
    <lightning-card title="I am communicating " icon-name="utility:user">
        <div class="slds-var-m-around_medium">
           <lightning-button label="Count++" onclick={handleOnClick}>
               
           </lightning-button>
        </div>
    </lightning-card>
</template>

Child JS

import { LightningElement, api } from 'lwc';

export default class ChildComponentCustomEventwithData extends LightningElement {
    endValue = 5;
    handleOnClick(){
        const myEventwithValue = new CustomEvent('increasecount',{
            detail:{
                endValue : this.endValue,
                msg : "I am String"

            }
        });
        this.dispatchEvent(myEventwithValue);
    }
}

Output