Child events and parent-to-child property binding in store components
Key Takeaway
Events up, properties down: a child dispatches an event to reach its parent, and a parent sets a child's public property or calls its public method to reach the child.
Lightning web components can be nested, which creates parent and child components that need to share information. For example, a store page may need one component to react to what a shopper chose in another. The direction of the data decides the method, and data can move between two children by going up to their parent and back down.
Parent and child components
Lightning web components are custom HTML elements, so you nest them the same way you nest HTML elements. Placing a child's tag, such as c-pickup-picker, in a parent's template makes it a child of that parent.
| How information travels | |
|---|---|
| Child to parent | The child dispatches an event, and the parent listens for it. |
| Parent to child | The parent sets a child's public property or calls a child's public method. |
| Unrelated components in separate DOM subtrees | They communicate through Lightning message service. |
Events and public properties connect parents and children only.