Communication Between LWC Components

Lightning Web Component (LWC) is one of the programming paradigms used to create Lightning Components in Salesforce. It's a popular technology among Salesforce developers, and Salesforce recommends it.

Component-based development is mostly used for performance and reusability. If you're making lightning web components, you're bound to get into a situation where you need to communicate with components. The term "communication" refers to the exchange of information between two or more components. There are two possibilities. Either components are related to one another through a relation, such as a Parent-Child Relationship, or they are unconnected to one another.

In this blog, we'll talk about:

• Parent to Child Communication

• Child to Parent Communication

Parent to Child Communication

As the name implies, Parent to Child communication occurs when a parent component includes the child component element in its HTML file and transmits data to the child component. To provide data to the child component, we must create a public variable in the child component that can be accessed from the parent component using the @api decorator.

Note: The @api decorator is used to establish reactive public properties.

To further grasp it, let's look at a basic example. We used the @api decorator in child to define a variable getValueFromParent, which we then utilized in an HTML template to show its value in the child component.

Now, move on to the parent component and declare one variable to give to the child component. A value variable was created and a string literal was applied to it. Add the child component's tag to the parent HTML template and assign the value to the child's property as an attribute to send the value to the child component.

Child to Parent Communication

As we've seen, the simplest approach to accomplish Parent to Child communication is to move a public property from a parent to a child. It's a little more challenging when it comes to communication between child to parent. We'll use CustomEvent to deliver value to the parent component from the child component.

Note that there is just one mandatory parameter in the CustomEvent function Object() { [native code] }: a string that links to the event type.

The component produces and dispatches the CustomEvent called getsearchvalue event when the user enters something in the lightning input field in our example. The data in detail property is included in the event.

The ongetsearchvalue property on the parent component listens for the getsearchvalue event and handles it in the handleSearchValue event handler. We assign the value from the event.detail field to the searchValue variable in handleSearchValue.

We can effectively communicate Parent to Child in this manner. Remember that the components in the previous examples are connected, but when they are not associated through a parent-child connection, we may use the pubsub model and the lightning messaging service(LMS) to communicate between them.

Follow us for more such posts...