Parent to child
A parent passes data by setting @api properties and can call @api methods on the child.
Public properties
Decorate a field with @api to make it public. In the parent's template, set it with an attribute: <c-status-badge label={status}></c-status-badge>. The attribute name is the kebab-case form of the field.
The child treats that value as read-only. Assign a new object in the parent if the value must change. Do not mutate an object the parent passed in.
Public methods
Decorate a method with @api when the parent should call it. The parent finds the child with this.template.querySelector('c-status-badge') and calls the method.
The child has to be in the DOM first. The parent's constructor is too early. connectedCallback can also be too early for children. Call the method from a handler that runs after render, or from renderedCallback once.
Who is allowed to set the value
The owner is the component whose template contains the child. The owner may set public properties, call public methods, and listen for events.
A container that sits between the owner and the child can read a public property and can call a public method. It cannot change the property. The owner is the one that passes the value down.
Example
javascript
import { LightningElement, api } from 'lwc';
export default class StatusBadge extends LightningElement {
@api label = 'New';
@api focus() {
this.template.querySelector('span')?.focus();
}
}