How should this be accomplished?

A developer is creating an app that contains multiple Lightning web components.

One of the child components is used for navigation purposes. When a user clicks a button called Next in the child component, the parent component must be alerted so it can navigate to the next page.

How should this be accomplished?
A . Update a property on the parent.
B . Fire a notification.
C . Create a custom event,
D . Call a method in the Apex controller.

View Answer

Answer: C

Explanation:

To notify the parent component from a child component when a button is clicked:

Option C: Create a custom event

In Lightning Web Components, child components communicate with parent

components by dispatching custom events.

Child Component:

// ChildComponent.js handleClick() {

const nextEvent = new CustomEvent(‘next’); this.dispatchEvent(nextEvent);

}

Parent Component:

<!– ParentComponent.html –>

<c-child-component onnext={handleNext}></c-child-component>

javascript

Copy code

// ParentComponent.js handleNext() {

// Navigate to the next page

}

Reference: "To communicate up the component containment hierarchy, fire a custom event in the child component."

― Lightning Web Components Developer Guide: Communicate with Events Why Other Options Are Incorrect:

Option A: Updating a property on the parent directly is not possible from the child.

Option B: "Fire a notification" is vague and not a standard mechanism.

Option D: Calling a method in the Apex controller does not facilitate child-to-parent communication within components.