MENU
Given the following containment hierarchy:
HTML
What is the correct way to communicate the new value of a property named "passthrough" to my-parent-component if the property is defined within my-child-component?
In Lightning Web Components (LWC), data flows 'down' via properties and 'up' via events. When a child component needs to communicate a change in a property or state to its parent, it must dispatch a CustomEvent. To pass specific data---such as the new value of the passthrough property---along with the event, the developer must use the detail property within the event initialization object.
Option C is the correct syntax. It creates a new CustomEvent named 'passthrough' and assigns the current value of the component's property (this.passthrough) to the detail key. The parent component can then listen for this event (using onpassthrough={handleEvent}) and access the value via event.detail. Option A is incorrect because it wraps the variable in quotes, passing the literal string 'this.passthrough' instead of the actual data. Option B creates an event but fails to include the data payload, meaning the parent would know an event occurred but wouldn't receive the new value. Option D uses incorrect syntax for event naming and variable referencing. Using the standard CustomEvent constructor with the detail property is the platform-standard way to ensure robust, typed data communication between component layers in the Shadow DOM.
==========