Decorators in Lightning Web Components (LWC) are special tools that enhance the functionality of properties and methods. Think of them as markers that make your code cleaner, more organized, and easier to manage. LWC provides several built-in decorators to control a component's behavior in a declarative way. Unleashing the Power of LWC Decorators! Here’s a breakdown of the most commonly used decorators:
Unleashing the Power of LWC Decorators!
1. @api
The @api decorator makes a property or method public, so it can be accessed from a parent component or other components.
Example:In this example, the message property is exposed to the parent component.
// parentComponent.js
import { LightningElement } from 'lwc';
export default class ParentComponent extends LightningElement {
message = 'Hello from Parent!';
}
<!-- parentComponent.html -->
<template>
<c-child-component message={message}></c-child-component>
</template>
// childComponent.js
import { api, LightningElement } from 'lwc';
export default class ChildComponent extends LightningElement {
@api message; // Accessible from the parent component
}
2. @track
The @track decorator was previously used to track changes in objects and arrays. However, as of Summer '21, non-primitive values (like objects and arrays) are reactive by default, so @track is rarely needed now.
Example (from earlier versions):
// example.js
import { LightningElement, track } from 'lwc';
export default class ExampleComponent extends LightningElement {
@track myObject = { name: 'LWC', value: 10 }; // Tracks changes in myObject
}
3. @wire
The @wire decorator binds Salesforce data or Apex method results to a property or method in your component. It ensures that the data automatically updates whenever the source changes.
Example (fetching data from Apex):
import { wire, LightningElement } from 'lwc';
import getAccountList from '@salesforce/apex/AccountController.getAccountList';
export default class AccountListComponent extends LightningElement {
@wire(getAccountList) accounts; // Automatically fetches account data
}
4. @wire with a Function
Using @wire with a function gives you more flexibility to handle data, like transforming it or managing errors.
Example:
import { wire, LightningElement } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccountList';
export default class AccountListComponent extends LightningElement {
accounts;
error;
@wire(getAccounts)
wiredAccounts({ error, data }) {
if (data) {
this.accounts = data;
this.error = undefined;
} else if (error) {
this.error = error;
this.accounts = undefined;
}
}
}
5. @wire with Parameters
You can pass dynamic parameters to a wire service using the syntax.
Example:
import { wire, LightningElement } from 'lwc';
import getAccountsByType from '@salesforce/apex/AccountController.getAccountsByType';
export default class AccountListComponent extends LightningElement {
accountType = 'Customer';
@wire(getAccountsByType, { type: '$accountType' }) accounts; // Dynamic parameter
}
Conculsion
Decorators in LWC make your code more efficient and easier to understand. Here's a quick summary of their main purposes:
With these decorators, building dynamic, reactive, and maintainable Lightning Web components becomes a breeze!
Kommentarer