1.Passing data down the component hierarchy.
2.Passing data up the component hierarchy.
3.Passing data to components that share no common ancestry.
1.Passing data down the component hierarchy :
There are three techniques for passing data from a parent to a child component.
a.Public Property
b.Public getters and setters
c.Public methods
Public Property :
A public property is exposed by applying the @api decorator on a class property of a child component.
This lets the parent component assign a value to it in two different ways.
Either via a custom HTML attribute or dynamically with javascript.
Note : public properties are reactive so the component re-rnders whenever one of its public properties is updated.
On the downside, you cannot run custom logic when the value changes and the child component should not assign values
to its public properties.
ex :
// parentComponent.html
<template>
<div class="slds-var-m-around_medium">
<c-child-component
child-attribute={valueToSet}>
</c-child-component>
<lightning-button variant="brand" label="Set Value" title="Set Value" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
</div>
</template>
// ParentComponent.js
import { LightningElement,track } from 'lwc';
export default class ParentComponent extends LightningElement {
@track valueToSet;
connectedCallback(){
//setting property value
this.valueToSet = "someValue";
}
handleClick(event) {
this.template.querySelector('c-child-component').childAttribute="someValue";
}
}
// childComponent.html
<template>
<lightning-card title="Public Property" icon-name="standard:product_consumed">
{childAttribute}
</lightning-card>
</template>
// ChildComponent.js
import { LightningElement,api } from 'lwc';
export default class ChildComponent extends LightningElement {
@api childAttribute;
}
Public getters and setters :
Public getters and setters behave exactly like public properties when used in a parent component.
However, they bring additional flexibility to the child component by allowing you to execute custom logic when retrieving or updating a value.
Additionally, a child component is able to set values using its own setters.
Another important difference with public properties is that getters and setters don’t provide persistence out of the box.
A common pattern to handle that is to use a “private” property prefixed with an underscore to store the value internally in the child component.
Here’s an example of how a parent component uses a childAttribute public setter from a child component and saves
its value in a _childAttribute property:
ex :
// parentComponent.html
<template>
<div class="slds-var-m-around_medium">
<c-child-component
child-attribute={valueToSet}>
</c-child-component>
<lightning-button variant="brand" label="Set Value" title="Set Value" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
</div>
</template>
// ParentComponent.js
import { LightningElement,track } from 'lwc';
export default class ParentComponent extends LightningElement {
@track valueToSet;
connectedCallback(){
//setting property value
this.valueToSet = "someValue";
}
handleClick(event) {
this.template.querySelector('c-child-component').childAttribute="someValue";
}
}
// childComponent.html
<template>
<lightning-card title="Public Getters and Setters" icon-name="standard:product_consumed">
{childAttribute}
</lightning-card>
</template>
// ChildComponent.js
import { LightningElement,api } from 'lwc';
export default class ChildComponent extends LightningElement {
_childAttribute;
@api
get childAttribute(){
return this._childAttribute;
}
set childAttribute(value){
// Extra Processing goes here
this._childAttribute = value;
}
}
Public Methods :
You may call public methods to pass several values to a child component in order to perform an action like a calculation.
As opposed to setters, methods allow you to enforce consistency by passing multiple parameters at once.
ex :
// parentComponent.html
<template>
<div class="slds-var-m-around_medium">
<c-child-component>
</c-child-component>
<lightning-button variant="brand" label="Set Value" title="Set Value" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
</div>
</template>
// ParentComponent.js
import { LightningElement,track } from 'lwc';
export default class ParentComponent extends LightningElement {
handleClick(event) {
this.template.querySelector('c-child-component').getDataFromParent("someValue1","someValue2");
}
}
// childComponent.html
<template>
<lightning-card title="Public Method" icon-name="standard:product_consumed">
{childAttribute1}
{childAttribute2}
</lightning-card>
</template>
// ChildComponent.js
import { LightningElement,api } from 'lwc';
export default class ChildComponent extends LightningElement {
childAttribute1;
childAttribute2;
@api
get getDataFromParent(value1,value2){
this.childAttribute1=value1;
this.childAttribute2=value2;
}
}
Note :
Unlike public properties or setters, methods are not exposed in the component’s HTML tag.
They can only be called with JavaScript. This can be a limitation if you need to call a method in a reactive way (whenever some values change).
Likewise, calling a method won’t automatically trigger a re-render on the target component.
The component only re-renders if the method modifies properties used in the component’s template.
Methods support asynchronous processing as they can return any type of value including promises
2.Passing data up the component hierarchy:
You can pass data from a child component to a parent or ancestor with events.
Lightning Web Components relies on DOM events (as defined in the standard DOM specification) to propagate data up the component hierarchy.
ex :
// parentComponent.html
<template>
<c-child onselect={handleSelect}></c-child>
</template>
// ParentComponent.js
import { LightningElement,track } from 'lwc';
export default class ParentComponent extends LightningElement {
@track contactId
handleSelect(event) {
const conId=event.detail;
this.contactId=conId;
}
}
// childComponent.html
<template>
<lightning-button onclick={handleClick} label="fireEvent"></lightning-button>
</template>
// ChildComponent.js
import { LightningElement} from 'lwc';
export default class ChildComponent extends LightningElement {
handleClick(event){
// Creates the event
const selectedEvent = new CustomEvent('select', {detail : contactId});
//dispatching the custom event
this.dispatchEvent(selectedEvent);
}
}
Note :
You can configure an event’s propagation so that it propagates to ancestor components that are not direct parents of a child component.
To do so, you can set the bubbles attribute when creating the event:
const myEvent = new CustomEvent('myevent', { bubbles: true };
You can also stop the event propagation at any time with Event.stopPropagation().
3.Passing data to components that share no common ancestry
Sometimes you need to send data to components that share no common ancestry.
For example, you may need to send data to or from a component hosted in a different region of a Lightning page or in a utility bar.
This type of communication can be achieved with the Lightning Message Service or with the pubsub module.
1.Lightning message service
2.pubsub module
Lightning message service :
The Lightning Message Service (LMS) is the preferred solution for communicating between components that aren’t in the same DOM tree.
LMS also allows communication between the three Salesforce UI technologies: Lightning Web Components, Aura and Visualforce.
LMS provides a publish/subscribe mechanism that allows for the exchange of messages between components.
For the sake of brevity and in order not to duplicate documentation, we won’t dive into the technical details of
how to publish and subscribe to Lightning messages – but it requires three key steps:
1.Declare a message channel using the LightningMessageChannel metadata type.
2.Publish a message using the publish() function from the @salesforce/messageChannel module.
3.Subscribe to a message using the subscribe() function from the @salesforce/messageChannel module.
pubsub module :
The pubsub module should be used as a last resort alternative in containers that do not support the Lightning Message Service.
The module provides a publish/subscribe mechanism for exchanging data across a web page.
It’s a functional solution but is not officially supported or actively maintained.
Summary :
1.Passing data down the component hierarchy with public properties, setters or methods.
2.Passing data up the component hierarchy with events.
3.Passing data to components that share no common ancestry with the Lightning Message Service or the pubsub module.
