Master Reactive Data with Decorators for Lightning Web Components!
When building Lightning Web Components (LWC), you may want to make properties or variables accessible to other components or have them update reactively.
This is where LWC decorators come in handy.
For example, let's say you are creating a custom component called "myComponent" that will be used by other components.
In this component, you have a public property called "data" that will hold some information.
To make this property accessible to other components, you would decorate it with the '@api' decorator like this:
import { LightningElement, api } from 'lwc';
export default class MyComponent extends LightningElement {
@api data;
}
Additionally, if you have an array or object that will change during the component lifecycle, you would use the '@track' decorator to make it reactive.
For example, let's add an object called "fullname" to our component that will be incremented when a button is clicked:
import { LightningElement, api, track } from 'lwc';
export default class MyComponent extends LightningElement {
@api data;
@track fullName = { firstName : '', lastName : '' };
handleClick() {
this.fullName.firstName = 'SFDC';
this.fullName.lastName = 'SAGA';
}
}
By decorating the 'fullname' object with '@track', we are telling the component to reactively update the DOM when it changes.
So when the 'handleClick' method updates the 'fullname', the component will automatically re-render with the new value.
Follow Us