Join us at GITEX 2024! Discover our solutions at Hall 4, Booth H-30 Schedule a Meeting Today.
Automate Marketing Initiatives with Salesforce Marketing Cloud Learn More
Join us at GITEX 2024! Discover our solutions at Hall 4, Booth H-30 Book your live demo today.
The Evolution of Salesforce How LWC is scaled

The Evolution of Salesforce: How LWC is Transforming the Platform

Looking for Salesforce services ?

Before starting our learning about parent-child communication in lwc, I have one question I hope you know its answer if you don’t know I will answer.

 

Why did Salesforce introduce LWC?

 

Salesforce introduced Lightning Web Components (LWC), a modern JavaScript framework for building reusable, scalable, and high-performance web components. With LWC, we can create reusable components, reducing development time and increasing productivity. LWC also integrates seamlessly with the Salesforce platform, making it the perfect choice for building custom applications on the Salesforce ecosystem. With LWC’s parent-child communication, components can reuse the behaviors components flexibly and modularly.

 

First, we need to understand @api decorator, because this is the heart of the communication from parent to child and child to parent.

 

For creating the public property, we have to use @api decorator. For that, first, we need to import api from the lwc package.

 

import { LightningElement,api } from ‘lwc’;

 

salesforce blog1 1

After then we need to decorate our property with @api

salesforce blog2 1

Some important point about @api decorator

  • The @api decorator marks a class member as public, meaning it can be accessed from outside the component.
  • Public properties and methods are reactive, meaning that the component will automatically rerender to reflect the change if they change.
  • Only one class member per component can be marked as the default export. This class member should be marked with the @api decorator.
  • The @api decorator can only be used on class members (such as properties and methods). It cannot be used on standalone variables or functions.
  • The @api decorator can be combined with other decorators, such as @track or @wire, to provide additional functionality.

Now let’s move to our main topic, parent-child communication in LWC

 

In the Salesforce Lightning Web Components (LWC) framework, parent-child communication refers to the way in which a parent component and its child component exchange information and interact with each other.

 

So, in this blog, we are going to understand about:

  • Parent-to -Child Communication
  • Child-to-Parent Communication

Parent to Child Communication

Parent-to-child communication happens between parent to child. When we pass data from parent to child, it’s called parent-to-child communication.

 

The parent component can pass data to its child through public properties, and the child component can then use it to render or modify its behavior.

 

For communication between the parent and child component, a parent component can access and interact with the child component with the help of properties, methods, and events. Communication with the parent-child component must have its events, processes, and properties. And with the use of decorators combinations like @api, @track, and @wire. We can create events, methods, and properties.

 

I hope you are enjoying it; ok, let’s continue.

 

A parent component can pass data to a child component using public properties. The child component can then access the data using the decorator.

salesforce blog3 1
salesforce blog4 1
salesforce blog5 1 768x349
salesforce blog6 1
salesforce blog7 1 768x308
salesforce blog8 1 768x416

Output

salesforce blog9 1

In this example, we pass the name value from parent to child. Decorator @api informed lwc that the name is public property and can be used to communicate between parent and child.

 

We can also pass value from one decorator to another in parent-child communication. I hope you got it; you didn’t get it. Let’s see one example.

 

We did not change the child component. We just changed the parent component

MicrosoftTeams image
MicrosoftTeams image (1)
salesforce blog9 1

Let’s understand this example.

 

In this example, we create one decorator @api Parentvalue = “https://www.zehntech.com”

 

And pass it to child component name = {Parentvalue}

 

Now I hope you got it, and I know what you are thinking, it’s very easy. It is. You need to practice.

 

Bruce Lee


“Practice makes perfect. After a long time of practicing, our work will become natural, skillful, swift, and steady.”

Child-to-Parent Communication

In child-to-parent communication, the child component sends values to the parent component. But in child-to-parent communication, we pass the value to the parent component by the custom event.

  • Component event: A component event, with the help of a component event on the component, can communicate with another component .it allow one component to send action events to another component.

  • Application event: with the help of an application event, different components can communicate with each other, even if they are not directly related. This event helps us when we develop a complex application with many different components, and we want to allow different components to interact with each other flexibly.

    Let’s see one example.

salesforce blog13 1024x401 1 768x301
salesforce blog14 2 768x266
salesforce blog16 1 1 768x231
salesforce blog17 1 1 768x350
salesforce blog18 1024x431 1 1 768x323

A place for big ideas.

Reimagine organizational performance while delivering a delightful experience through optimized operations.

Importance of parent child communication in LWC salesforce

  • Parent-child communication allows us to reuse components with different components. This will save us time.

  • Creating different separated components for different functionality, this becomes easy to maintain our code.

  • Parent-child communication helps us organize our code according to logic, functionality, and work.

  • Parent-child communication makes debugging easy, and we can find and track bugs and errors easily where is the bug, error parent or child component or any other component.

  • Parent-child communication makes development easy. We can create components according to requirements.

  • Like if the user want doesn’t like some components, we can update only that, and we can also add a new component.

  • Parent-child communication Enhanced testability. It allows the testing of individual components.

  • Parent-child communication makes collaboration easy between developers, as different components can be developed and maintained by different team members.

  • In addition to encouraging best practices such as separation of component design, parent-child communication can improve the codebase quality overall.

  • To build and maintain a Salesforce application, clear and logical parental communication can improve the developer experience.
    Parent-child communication makes development easy, increases accuracy, and fast development.

Conclusion

By parent-child communication, we developers can quickly develop large and complex applications in LWC because it allows us to effectively share data and functionality between components and public properties and methods, and the decorator helps us achieve this. LWC components can easily share and update data with their parent or child components. It also allows us to reduce the amount of time and code.

Table of Contents

Have Any Project

or Work Together?

          Success!!

          Keep an eye on your inbox for the PDF, it's on its way!

          If you don't see it in your inbox, don't forget to give your junk folder a quick peek. Just in case.









              You have successfully subscribed to the newsletter

              There was an error while trying to send your request. Please try again.

              Zehntech will use the information you provide on this form to be in touch with you and to provide updates and marketing.