SetMethodParent Component Html
<template>
<lightning-card variant="Narrow" title="Setter Method Demo" >
<c-set-method-child detail = {userDetails}></c-set-method-child>
</lightning-card>
</template>
SetMethodParent Componentjs
import { LightningElement } from 'lwc';
export default class SetMethod extends LightningElement {
<-- user Details age multiple *2 use write code child component call to
parent update age-->
userDetails = {
name:"salesforcetroop",
age:25
}
}
setMethodChild Component Html
<template>
<lightning-card variant="Narrow" title="Hello" icon-name="standard:account">
<p class="slds-p-horizontal_small"><strong>Name -{detail.name} </strong></p>
<p class="slds-p-horizontal_small"><strong>Name -{detail.age} </strong></p>
</lightning-card>
</template>
setMethodChild Component Js
import { LightningElement,api } from 'lwc';
export default class SetMethodChild extends LightningElement {
userDetail
@api
get detail(){
return this.userDetail
}
set detail(data){
let newAge = data.age*2
this.userDetail = {...data, age:newAge}
}
}
No comments:
Post a Comment