How to send multiple parameters to Event in LWC

Question

I have a below event in LWC

const selectedEvent = new CustomEvent('custEvent', {
    detail: this.someData;
});

this.dispatchEvent(selectedEvent );

I also want to pass this.anotherData;

Could someone please confirm if is there anyway to pass 2 parameters to an event or do I need to create another event.

Answer 1

Pass a JS Object direct into detail

const selectedEvent = new CustomEvent('custevent', {
    detail: {
        type: "Fiat",
        model:"500",
        color:"white"
    } 
});

Access the object in your listener method and get the value from object as:-

hndlecustEvent(event) {
    this.value1 = event.detail.type;
    this.value2 = event.detail.model;
  }

Another thing, The CustomEvent() constructor has one required parameter, which is a string indicating the event type. As a component author, you name the event type when you create the event. You can use any string as your event type. However, we recommend that you conform with the DOM event standard.

• No uppercase letters
• No spaces
• Use underscores to separate words

Your event name is custEvent which is not valid as it has uppercase letter. You should use only lowercase.

Update:-

According to CustomEvent() documentation on MDN,

Parameters

1. typeArg:- A DOMString representing the name of the event.

2. customEventInit (Optional):- A CustomEventInit dictionary, having the following fields:

   "detail", optional and defaulting to null, of type any, that is an event-dependent value associated with the event.

The CustomEventInit dictionary also accepts fields from the EventInit dictionary.

So, You can pass the value only in detail.

Answer 2

You can add second parameter as follows:

const selectedEvent = new CustomEvent('custevent', {
    detail: this.someData,
    secondParam : this.anotherData
});