We’re all familiar with the prominence of Lightning Web Component (LWC) as one of Salesforce’s programming models for building Lightning Components. It stands out among Salesforce developers and receives commendation from the company itself. Wondering why it’s widely adopted? Well, its speed and lightweight nature make it a top choice.
The primary objective behind adopting component-based development revolves around enhancing performance and promoting reusability. When working with lightning web components, you’re likely to encounter scenarios requiring communication between them. Communication, in this context, involves the exchange of data between two or more components. This situation can unfold in two ways: components interconnected via relationships such as a Parent-Child Relationship, or components existing independently, i.e., unrelated.
So, in this blog, we are going to cover:
- Parent to Child Communication.
- Child to Parent Communication.
Communication from a parent component to a child component
As indicated by its name, Parent to Child communication occurs between two components when the parent component includes the child component tag in its HTML file and transfers data to the child. To enable data transmission to the child component, it’s essential to declare a variable within the child component using the @api decorator, allowing it to be public and accessible from the parent component.
Reminder: The @api decorator serves to define a reactive public property.
An illustrative instance for enhanced comprehension
In this scenario, we’ve established a variable named getValueFromParent within the child component, employing the @api decorator. Subsequently, this variable is utilized within the HTML template of the child component to showcase its value.
Shifting focus to the parent component, start by declaring a variable within the parent component intended to be transmitted to the child component. In this instance, we’ve initiated a variable named value within the parent component and assigned it a string literal. To relay this value to the child component, include the child component’s tag within the parent’s HTML template and allocate the value to the child’s property as an attribute.
Communication from a child component to a parent component
As observed, transferring a public property from a parent component and retrieving it in the child represents the simplest method for achieving Parent to Child communication. However, in the context of Child to Parent communication, the process becomes slightly more intricate. From the child component, the value is passed to the parent component leveraging CustomEvent.
Reminder: The CustomEvent constructor necessitates one mandatory parameter: a string defining the event type.In this particular example, as the user inputs data into the lightning input field, the component generates and dispatches a CustomEvent titled “getsearchvalue” to the event. This event encapsulates the data within the detail property.
The parent component is set to listen for the “getsearchvalue” event through the ongetsearchvalue attribute and manages it within the handleSearchValue event handler. Within handleSearchValue, the value retrieved from event.detail is assigned to the searchValue variable.
This method enables us to facilitate effective Parent-Child communication. It’s crucial to note that in the preceding example, the components are interconnected. However, when components lack a direct parent-child relationship, communication can be achieved utilizing the pubsub model and Lightning Message Service (LMS).