@track vs @api vs @wire

 @Api :

@Api properties are considered Public and we use them in 2 scenarios:

1. If we want to exchange data between 2 components.

2. If we want to pass values from App builder (in the aura, this is achieved using the ".design" file and the attributes declared in "design file" are called "design attributes").

childCmp.html

<template>
  Value received From Parent are :
  Name = {childvar.name}
  Age = {childvar.age} 
</template>
childCmp.js
import { api, LightningElement,track } from 'lwc';

export default class ChildCmp extends LightningElement {
    @api childvar;
}
parentCmp.html
<template>
  <c-child-cmp childvar={passval}></c-child-cmp>  
</template>
parentCmp.js
import {
    LightningElement
} from 'lwc';

export default class ParentCmp extends LightningElement {
    passval= {
            name: 'Manju',
            age: 29
        };    
}

@Track:
@track properties are considered private(available within the component) and we use this only in the below scenario:

1. Use @track only if a field contains an object or an array and if you want the framework to observe changes to the properties of the object or to the elements of the array. If you want to change the value of the whole property, you don’t need to use @track.

@wire:
Use a wire adapter to read Salesforce data (records) and metadata (layout details, fields on an object, and so on).

Comments