Parent-Child Communication in LWC

Sometimes we need data to be flown from Child-LWC to the parent (achieved through event), while sometimes we require data to be flown from parent to the child.

Here we deal with the flow from Parent (parentLWC) to Child (childLWC) :

***parentLWC***

html

<div title="Child LWC">

          <c-child-L-W-C clientid={records1}></c-vij-L-W-C>

</div>

***childLWC***

html

<template>

        <lightning-card title="Child Clientssss" icon-name="custom:custom14">

                <template if:true={bool}>

                <template for:each={newData} for:item="row" for:index="index" >

                       <------- show data ------->

                </template>

                </template>

         </lightning-card>

</template>

---

JS

---

import { LightningElement,wire, track, api } from 'lwc';

export default class childLWC extends LightningElement {

 @track newData=[];

 @track bool=false;

 @api

 get clientid() {

  // eslint-disable-next-line no-console

  return this._clientid;

 }

  set clientid(value) {

  if(value){

   this._clientid = value;

   for(var i=0; i<value.length; i++){

    this.bool=true;

    this.newData.push(value[i]);

   }

  }

  else{

   this.bool=false;

   this._clientid = undefined;

   this.newData = [];

  }

 }

}