bonfire-app
bonfire-app copied to clipboard
clarify usage of Surface's `prop` vs `data` in components
Excerpts from docs:
prop
- Defines a property for the component. You can pass information from a parent component down to a child using these properties.
data
- Defines a data assign for a stateful LiveComponent or LiveView. The set of all data assigns represents the state of the component/view. Stateful components like Surface.LiveView and Surface.LiveComponent hold their state in the socket's assigns in data
.
Note: The data macro is available in both stateful and stateless components. It allows you to define intermediary assigns in the update function of the component that computes values based on one or several properties.
Using prop
and slot
defines the public API of the component as their values are initialized outside the component. Assigns declared as data
are considered private since they can only be accessed inside the component's scope.
All values declared using any of the above functions will be merged into the components assigns and will be available inside the template using the @ prefix.