Parent to Child communication in Lightning Web Components
The first being data-flow from Parent to the child :
In our scenario, we have one parent, say parentLWC, and the other child, say childLWC.
-------------------- parentLWC --------------------
.html :
<template>
<lightning-input label="VALUE" value={donchild} onchange={setValue}>
</lightning-input>
<template if:true={donchild}>
<!-- the first donchild is the attribute on child which gets value from the value on parent {donchild}. Remember to make the attribute in lower-cases only -->
<c-child-L-W-C donchild={donchild}></c-child-L-W-C>
</template>
</template>
.js :
import { LightningElement, track, wire } from 'lwc';
export default class HelloWorld extends LightningElement {
@track donchild;
setValue(event) {
this.donchild = event.target.value;
// eslint-disable-next-line no-console
console.log("-->data>>> "+this.donchild);
}
}
-------------------- childLWC --------------------
.html :
<template>
<lightning-card title="Child CMP" icon-name="custom:custom14">
{donchild}
</lightning-card>
</template>
.js :
import { LightningElement, track, api } from 'lwc';
export default class ChildLWC extends LightningElement {
@api //annotate with @api to fetch the attribute value
get donchild() { //getter method
return this._donchild;
}
set donchild(value) { //setter method
if(value){
// eslint-disable-next-line no-console
console.log("-- "+value);
this._donchild = value;
}
else{
this._donchild = undefined;
}
}
}
More Documentation available at : https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_components_data_binding
The first being data-flow from Parent to the child :
In our scenario, we have one parent, say parentLWC, and the other child, say childLWC.
-------------------- parentLWC --------------------
.html :
<template>
<lightning-input label="VALUE" value={donchild} onchange={setValue}>
</lightning-input>
<template if:true={donchild}>
<!-- the first donchild is the attribute on child which gets value from the value on parent {donchild}. Remember to make the attribute in lower-cases only -->
<c-child-L-W-C donchild={donchild}></c-child-L-W-C>
</template>
</template>
.js :
import { LightningElement, track, wire } from 'lwc';
export default class HelloWorld extends LightningElement {
@track donchild;
setValue(event) {
this.donchild = event.target.value;
// eslint-disable-next-line no-console
console.log("-->data>>> "+this.donchild);
}
}
-------------------- childLWC --------------------
.html :
<template>
<lightning-card title="Child CMP" icon-name="custom:custom14">
{donchild}
</lightning-card>
</template>
.js :
import { LightningElement, track, api } from 'lwc';
export default class ChildLWC extends LightningElement {
@api //annotate with @api to fetch the attribute value
get donchild() { //getter method
return this._donchild;
}
set donchild(value) { //setter method
if(value){
// eslint-disable-next-line no-console
console.log("-- "+value);
this._donchild = value;
}
else{
this._donchild = undefined;
}
}
}
More Documentation available at : https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_components_data_binding
No comments:
Post a Comment