In Lightning Web Components (LWC), communication between parent and child components can be achieved in several ways.
Option A: The parent component can use a public property to pass the data to the child component.
Correct Method.
The child component can declare a public property using the @api decorator.
The parent component can then pass data to the child component via this property in the template.
Example:
Child Component (childComponent.js):
import { LightningElement, api } from 'lwc';
export default class ChildComponent extends LightningElement {
@api
myProperty;
}
Parent Component Template (parentComponent.html):
<template>
<c-child-component my-property={parentValue}></c-child-component>
</template>
The child component can expose a public method using the @api decorator.
The parent can call this method using a DOM query selector.
Example:
Child Component (childComponent.js):
import { LightningElement, api } from 'lwc';
export default class ChildComponent extends LightningElement {
@api
myMethod(value) {
// handle the value
}
}
Parent Component (parentComponent.js):
import { LightningElement } from 'lwc';
export default class ParentComponent extends LightningElement {
handleButtonClick() {
const childComponent = this.template.querySelector('c-child-component'); childComponent.myMethod('some value');
}
}
Custom events in LWC are used for child-to-parent communication.
The child component can dispatch events to communicate with the parent.
Events do not flow from parent to child in LWC.
Using an Apex controller to pass data between parent and child components is unnecessary and inefficient.
Apex controllers are used for server-side data operations, not component communication.
Reference:
Passing Data to Child Components
Option B: The parent component can invoke a public method in the child component.
Correct Method.
Calling Methods on Child Components
Options Not Suitable:
Option C: The parent component can use a custom event to pass the data to the child component.
Incorrect for Parent-to-Child Communication.
Communicating with Events
Option D: The parent component can use the Apex controller class to send data to the child component.
Not Appropriate.
Calling Apex Methods
Conclusion:
The parent component can pass a string value to the child component using Option A (public property) and Option B (public method).
These are the standard and recommended ways for parent-to-child communication in LWC.