In Lightning Web Components (LWC), custom events are used for communication between components. The two characteristics that are true for LWC custom events are:
Option A: Data may be passed in the payload of a custom event using a property called detail.
// Child component JavaScript
const myEvent = new CustomEvent('myevent', {
detail: { data: 'Some data' }
});
this.dispatchEvent(myEvent);
// To enable bubbling and composition
const myEvent = new CustomEvent('myevent', {
bubbles: true,
composed: true
});
this.dispatchEvent(myEvent);
Reference:
"The CustomEvent interface represents events initialized by an application for any purpose. You can pass data to the event handler using the detail property."
- Lightning Web Components Developer Guide: Communicate with Events
Option D: By default, a custom event only propagates to its immediate container.
"Custom events don't bubble or compose by default. To make an event bubble up through the DOM tree, set the bubbles parameter to true when creating the event."
- Lightning Web Components Developer Guide: Event Propagation
Incorrect Options:
Option B: Incorrect because by default, custom events do not propagate to child components or beyond the immediate container without setting bubbles and composed to true.
Option C: Incorrect because @wire is used for data binding and cannot be used to pass data in the payload of a custom event.