Tuesday, August 6, 2019

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

No comments:

Post a Comment