Question 209 - Certified B2B Commerce Administrator discussion

The correct way to demonstrate the passing of a message from the grandchild component to the grandparent component is by using an attribute on the child component to pass the message. This can be done by using the @api decorator in the grandchild component and then handling the message in the grandparent component with the handlemessage method. For example:

<!-- grandchild.html --> <template> <lightning-button label=''Send Message'' onclick={handleClick}></lightning-button> </template>

// grandchild.js import { LightningElement, api } from 'lwc';

export default class Grandchild extends LightningElement { // Declare an attribute to pass the message @api message = 'Hello from grandchild';

// Handle the button click and fire an event handleClick() { // Create a custom event with the message as detail const event = new CustomEvent('message', { detail: this.message }); // Dispatch the event from this component this.dispatchEvent(event); } }

<!-- child.html --> <template> <c-grandchild onmessage={handleMessage}></c-grandchild> </template>

// child.js import { LightningElement } from 'lwc';

export default class Child extends LightningElement { // Handle the message event from the grandchild component handleMessage(event) { // Get the message from the event detail const message = event.detail; // Fire another event with the same message to pass it to the parent component this.dispatchEvent(new CustomEvent('message', { detail: message })); } }

<!-- parent.html --> <template> <c-child onmessage={handleMessage}></c-child> </template>

// parent.js import { LightningElement } from 'lwc';

export default class Parent extends LightningElement { // Declare a property to store the message message;

// Handle the message event from the child component handleMessage(event) { // Get the message from the event detail and assign it to the property this.message = event.detail; // Do something with the message, such as display it on the screen console.log(this.message); } }