Send multiple parameters in LWC Events via Detial property

Lightning Web Components can create and dispatch custom events. You can use events to communicate up the component containment hierarchy. It allows you to pass any kind of data via the detail property, which makes it flexible. Our focus will be to learn how to send multiple parameters in LWC Events via Detial property.

Use Case – Send multiple parameters in LWC Events

Let’s have a look on the standard way of passing data via the events in Lightning Web Component.

// Creates the event with the contact ID data.
const selectedEvent = new CustomEvent('selected', { detail: this.contact.Id });
// Dispatches the event.
this.dispatchEvent(selectedEvent);

The above example shows an event has bee created and dispatched with contact Id as data via the detail property of the custom event in Lightning Web component.

Now, the requirements changes. The developer needs to pass multiple parameters via the detail property. For example, Developer needs Id and Name together in the event listener method in the parent component.

Solution – Passing multiple parameters through Events in LWC

You can create an object and assign the values to be passed in object parameters.

//creating an object in javaScript with parameter type, model and color 
var car = {type:"Fiat", model:"500", color:"white"};
const selectedEvent = new CustomEvent('custevent', {
    detail: car; 
});

Passing this object value via the detail property of the custom event in Lightning Web Component gives you the flexibility to pass multiple parameters as data.

Working Example

We have created two Lightning Web Component. They are:-

• eventsWithObject
• eventsWithObjectParent

The eventsWithObject is child component and being called in parent lightning web component named as eventsWithObjectParent. The eventsWithObject has lightning button which fires an custom event whenever it is being clicked.

Custom events fired via the eventsWithObject has been listened in eventsWithObjectParent and handled. Let’s go through the full code:-

eventsWithObject.html

<template>
    <lightning-button onclick={handleClick} label="fireEvent"></lightning-button>
</template>

eventsWithObject.js

import { LightningElement } from 'lwc';
export default class EventsWithObject extends LightningElement {
    car = {type:"Fiat", model:"500", color:"white"};
    handleClick(){
        // Creates the event
        const selectedEvent = new CustomEvent('custevent', {
            detail : this.car
        });
        //dispatching the custom event
        this.dispatchEvent(selectedEvent);
    }
}

eventsWithObject.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

eventsWithObjectParent.html

<template>
    {variable1} {variable2}
    <c-events-with-object oncustevent={handleEvent}></c-events-with-object>
</template>

eventsWithObjectParent.js

import { LightningElement } from 'lwc';
export default class EventsWithObjectParent extends LightningElement {
    variable1;
    variable2;
    handleEvent(event){
        //access object parameters and assign the value
        this.variable1= event.detail.type;
        this.variable2= event.detail.model;
    }
}

eventsWithObjectParent.js-meta.xml

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

Demo

I have placed the component on the home page by editing the Lightning home page.

Once users hit the fireEvent button, They sees the values on the screen.

Events Best Practices

If you do use detail, use primitive types. JavaScript passes all data types by reference except for primitives. If a component includes an object in its detail property, any listener can mutate that object without the component’s knowledge, which is a bad thing!

It is possible to avoid leaking internal state when using a non-primitive type. Before you add data to the detail property, copy it to a new object or array. Copying the data to a new object ensures that you’re sending only the data you want, and that the receiver can’t mutate your data.