bonfire-app icon indicating copy to clipboard operation
bonfire-app copied to clipboard

clarify usage of Surface's `prop` vs `data` in components

Open mayel opened this issue 1 year ago • 0 comments

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.

mayel avatar Dec 30 '23 13:12 mayel