The Lightning Web
Components programming model has three decorators that add functionality to
property or function. Decorators dynamically alter the functionality of a
property or function.
There are mainly
three decorators that we use in LWC.
@api:
Public properties are reactive.
If the value of public property changes, the component rerenders.
To expose a public property, decorate a
field with @api. Public properties define the API for a component.
· To
expose a public method, decorate it with @api. Public methods are
part of a component’s API. To communicate down the containment hierarchy, owner
and parent components can call JavaScript methods on child components.
· import
@api decorator from lwc
|
1 |
import { LightningElement, api } from 'lwc'; |
doItem.js
|
1 2 3 4 5 |
// todoItem.js import { LightningElement, api } from 'lwc'; export default class doItem extends LightningElement { @api itemName = 'New
Item'; } |
todoItem.html
|
1 2 3 4 5 |
<!-- todoItem.html --> <template> <div class="view"> <label>{itemName}</label> </div> |
todoApp.html
|
1 2 3 4 5 6 7 |
<!-- todoApp.html --> <template> <div class="listing"> <c-todo-item item-name="Srinivas"></c-todo-item> <c-todo-item item-name="Lakshmi"></c-todo-item> </div> </template> |
@track
Fields are reactive. If a field’s value changes,
and the field is used in a template or in a getter of a property that’s used in
a template, the component rerenders and displays the new value.
There is one use case for @track. When a field
contains an object or an array, there’s a limit to the depth of changes that
are tracked. To tell the framework to observe changes to the properties of an
object or to the elements of an array, decorate the field with @track
Import @api decorator from lwc.
helloWorld.html
|
1 2 3 4 5 6 7 8 |
<template> <lightning-card title="HelloWorld" icon-name="custom:custom14"> <div class="slds-m-around_medium"> <p>Hello, {greeting}!</p> <lightning-input label="Name" value={greeting} onchange={changeHandler}> </lightning-input> </div> </lightning-card> </template> |
helloWorld.js
|
1 2 3 4 5 6 7 |
import { LightningElement } from 'lwc'; export default class HelloWorld extends LightningElement { greeting
= 'World'; changeHandler(event)
{ this.greeting
= event.target.value; } } |
@wire
To read Salesforce
data, Lightning web components use a reactive wire service. When the wire
service provisions data, the component rerenders.
Components
use @wire in their JavaScript class to specify a wire adapter or an Apex
method.
We need to import
the @salesforce/apex scoped module into JavaScript controller
class.
|
1 |
import apexMethodName from '@salesforce/apex/Namespace.Classname.apexMethodRef'; |
We can call the apex class in Lightning web component using these different ways:
- Wire a property
- Wire a function
- Call a method imperatively
