A Decorator is a type of declaration that can be added to a property, or function. ECMAScript includes the ability to build decorators, but these three decorators are exclusive to Lightning Web Components.
To expose a public property, use @api to decorate a field. Public properties define the API for a component.
What exactly is public property?
Public properties are visible in the composition and the parent component can set the value for the properties defined in the child component.
Public properties used in a template are reactive. If the value of a public property used in a template changes, the component re-renders.
An owner component that uses a component in its markup can programmatically access the component’s public properties via DOM properties.
myGreetings = this.template.querySelector('c-child-component').greetings;
Call Methods on Child Components
The above component code can be found here.
When the value of a field changes and the field is used in a template or a getter of a property used in a template, the component rerenders and displays the new value. When you assign an object or an array to a field, the framework notices some changes to the object or array’s internals, such as when you assign a new value.
Decorate a field with @track to instruct the framework to monitor changes to an object’s properties.