In this article, I endeavor to delineate the complexities of component communication, offering a simplified and approachable means of understanding this fundamental concept.

Analogical explanation

Before penning this article, I pondered the optimal means of articulating this topic to those without a background in web development. Ultimately, I concluded that an analogy would best serve to facilitate comprehension.

Let's examine a scenario to demonstrate parent-child and child-parent communication in LWCs. Imagine a father and his child playing catch in their backyard. The father throws the ball to the child, who deftly catches it. However, when the child attempts to return the ball by throwing it back to the father, it falls short, bringing the game to an abrupt end due to the child's limited strength. In a bid to overcome this situation, the ingenious child devises a solution by utilizing a small, remote-controlled pickup truck to carry the ball back to the father, ultimately keeping this, (now so-called) game of catch going.

At this point, you may be questioning why the father and child didn't simply reduce the distance between them. Well hold on you smart brainiacs, let me get my point straight. In this analogy, the father represents the parent component, while the child represents the child component, both attempting to pass the ball (i.e., parameter) to each other. The sole variation here lies in the method by which they pass the ball.

Parent-to-child communication

In LWC, a child component is nested within the parent component, meaning that the parent component is always wrapped around the child component. This arrangement allows the parent component to transmit data to the child component directly (analogically, throw the ball) via HTML. On the other hand, LWC provides a means to retrieve data sent by the parent component in the child component through a popular annotation(child's adept skills) known as @api.

Consider the code provided below.

// c/parent
import { LightningElement } from 'lwc';

export default class Parent extends LightningElement {
    data = "Ball"
}

<!-- c/parent -->
<template>
    <lightning-card title="Parent" class="slds-var-p-around_small">
        <c-child parent-data={data}></c-child>
    </lightning-card>
</template>

The above code represents the JavaScript and HTML of the parent component. The parent component includes a property called data, which is transmitted to the child component via HTML.

Let's take a look at the child component.

// c/child
import { LightningElement, api } from 'lwc';

export default class Child extends LightningElement {
    @api parentData;
}

<!-- c/child -->
<template>
    <lightning-card title="Child" class="my-card slds-tabs_card">
        <p>Caught the {parentData}</p>
    </lightning-card>
</template>

The parentData property of the child component has been annotated by @api decorator here. This decorator, in technical terms, makes a property public in nature, ie. its value can be populated by any component that encloses it (parent component). While you are at it, you may also compare the HTML code of the parent component with the JavaScript code of the child component. A notable difference is that the parentData property in the child component, which is written in camel case, is been addressed by the parent using kebab case(parent-data). This conversion of cases is common in LWC and you can read more about it here.

This is how the code output looks so far.

Child-to-parent communication

Well, now that the child has the ball, it wants to send it back to the father. The parent component could send the data to the child through HTML, but how do we send data from child to parent, when the parent isn't present in the child's HTML? To put it simply, the child component doesn't know who its parent is, so it cannot directly send data back to the parent. In order to send data back to the parent, the child component needs to take the help of its remote-controlled truck, an event. This event is dispatched by the child component and then handled by the parent component using an event handler.

To demonstrate this, let's add a button to the child component that when clicked sends some content to the parent component.

<!-- c/child -->
<template>
  <lightning-card title="Child" class="my-card slds-tabs_card">
    <p>Caught the {parentData}</p>
    <!-- New Button -->
    <lightning-button
      label="Send data back using the truck🛻"
      onclick={sendBackTheBall}
    ></lightning-button>
    <!-- New Button -->
  </lightning-card>
</template>

Now that we have a button that on clicked, calls the function sendBackTheBall, let's add that function to the JavaScript file of the child component. this function primarily dispatches an event to transmit data to the parent component.

// c/child
import { LightningElement, api } from "lwc";

export default class Child extends LightningElement {
  @api parentData;

  sendBackTheBall() {
    this.dispatchEvent(
      new CustomEvent("sendbacktheball", {
        detail: "ball"
      })
    );
  }
}

Here, the sendBackTheBall function creates a new custom event using the CustomEvent class. The event is given the name sendbacktheball (all lowercase characters) and some data is passed in the detail property of the custom event. Finally, the event is dispatched using the dispatchEvent function, which is bound to the current context.

As far as the parent component goes, it needs to listen to the event emitted by the child, which can be done directly through the parent component's HTML code.

<!-- c/parent -->
<template>
  <lightning-card title="Parent">
    <p class="slds-var-m-horizontal_medium">Recieved the {childData}</p>
    <c-child parent-data={data} onsendbacktheball={handleChildData}></c-child>
  </lightning-card>
</template>

In the above code of the parent component, you can observe that a new attribute onsendbacktheball has been added to the <c-child> element in the parent's HTML, followed by an equals sign and a function name handleChildData. By adding an attribute with the event name prefixed with 'on', the parent can listen to a child component's event. Moreover, the HTML also includes a new <p> tag above the child element, which displays a new property called childData.

// c/parent
import { LightningElement } from 'lwc';

export default class Parent extends LightningElement {
    data = "Ball"
    childData;

    handleChildData(event) {
        this.childData = event.detail
    }
}

The aforementioned JavaScript code pertaining to the parent component features the function handleChildData, which serves to assign the value of the event.detail value (which is sent by the child component) to the childData property.

This is the final result of our parent-child component in action. Pretty impressive isn't it?

Phew!😥 Congratulations on making it to the end of the article! It was a lot of information to digest, so well done for sticking with it.👏 If you're feeling inspired, I encourage you to start building your own lightning web components. Practice is the best way to solidify your understanding of the concepts covered in this article. While my analogy of playing catch with a remote-controlled pickup truck might not be the most practical solution, it does serve as a useful reminder that sometimes the best solutions come from thinking outside the box.

I also wanted to mention that this was my first article🥳, so please forgive me if there were any mistakes or areas for improvement. I would greatly appreciate any feedback you may have on how I can improve my writing in the future. Thank you for reading!