September 20, 2023

Parent To Child

• using @api method

childComp.js

import { LightningElement, track,api } from "lwc";

export default class ChildComp extends LightningElement {
  @track value=100; //reactive in nature 
  
  //public method
  @api changeValue() {
    this.value=200;
  }
}

childComp.html

<template>
    The Value is : {value}
</template>

parentComp.html

<template>
  <!--calling child web component here-->
  <c-child-comp></c-child-comp>
  
  <lightning-button variant="brand" label="Submit" onclick={handleClick}></lightning-button>
</template>

parentComp.js

import { LightningElement } from "lwc";

export default class ParentComp extends LightningElement {
  handleClick() {
    //firing an child method
    this.template.querySelector("c-child-Comp").changeValue();
  }
}

• using @api variable

childComp.js

import { LightningElement, track,api } from "lwc";

export default class ChildComp extends LightningElement {
  
  //public property
  @api name;
  
  connectedCallback(){
    console.log('data from parent is::'+this.name);
  }
}

childComp.html

<template>
    The Value from parent is : {name}
</template>

parentComp.html

<template>
  <!--calling child web component here-->
  <c-child-comp name={dataFromParent}></c-child-comp>
  <!-- if you write name-from-parent={dataFromParent} then you need to write in the child js like @api nameFromParent; -->
  
  <lightning-button variant="brand" label="Submit" onclick={handleClick}></lightning-button>
</template>

parentComp.js

import { LightningElement } from "lwc";
dataFromParent;

export default class ParentComp extends LightningElement {
  handleClick() {
    this.dataFromParent=event.target.value;
  }
}

Child To Parent

• Using declarative event approach

childComp.html

<template>
    <lightning-input type="text" value={dataFromChild} onchange={sendDataToParent} ></lightning-input>
</template>

childComp.js

import { LightningElement, track,api } from "lwc";

export default class ChildComp extends LightningElement {
  
  @track dataFromChild;
  
  sendDataToParent(){
        let clickedMeTest = new CustomEvent('senddata', {detail : this.dataFromChild});
        this.dispatchEvent(clickedMeTest);
  }
}

parentComp.html

<template>
  <!--calling child web component here-->
  <c-child-comp onsenddata={handleChildData}></c-child-comp>
  
  Data from child comp is :: {dataFromParent}
</template>

parentComp.js

import { LightningElement } from "lwc";
dataFromParent;

export default class ParentComp extends LightningElement {
  handleChildData() {
    this.dataFromParent=event.detail;
  }
}

refreshApex in LWC

Static Resource in LWC

5 2 votes

Article Rating

Subscribe

Login

Notify of

new follow-up comments new replies to my comments

Label

{} [+]

Name*

Email*

Website

Label

{} [+]

Name*

Email*

Website

0 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments