1

I read from the documentation that the child component must treat property values passed from the owner component as read-only. If the child component tries to change a value passed from an owner component, you see an error in the browser console. And yet I changed the value of the public property and it worked, I don't get an error. You can see the code on the link

Can someone help me to understand that.

Thanks in andvance!

2

Your code is incorrect. The error states that the parent property is immutable. I've corrected your code, provided as this edit.

As you can see, when you click the button, the child's version changes, but the parent's version does not. You should be aware of this limitation. Previous versions of LWC wouldn't update the child version either, but this appears to have been changed. Regardless, to communicate changes to a value, always use an event to notify the parent of the requested change.

parentComponent.html

<template>
   <c-child-component age={age}></c-child-component> 
   <div>
   The parent component thinks your age is: {age}
   </div>
</template>

parentComponent.js

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

export default class ParentComponent extends LightningElement {
    @track age = 28;
}

childComponent.html

<template>
    <lightning-button label="change age" variant="brand" onclick={handlerClick}></lightning-button>
    <div>The child component thinks your age is: {age}</div>
</template>

childComponent.js

import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {
    @api age;

    handlerClick(){
        this.age--;
    }

}
| improve this answer | |
  • Thanks a lot @sfdcfox. I understand now. really appreciate your help. – dibocor May 28 '19 at 23:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.