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
- typeArg:- A DOMString representing the name of the event.
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.