How do props work, and what is one-way data flow?

Summary

Props pass data from parent to child; when the parent's value changes, the child receives the update. The child must not mutate a prop: data flows down, and changes go back up as events, so the parent stays the owner of its state.

Longer Answer

Declare props with defineProps (with types and defaults, or TypeScript generics). If the child needs a local, editable copy, initialise a ref from the prop; if it needs a transformed value, use a computed. Mutating a primitive prop triggers a warning; mutating a property of an object prop does not warn (objects are shared by reference) but is still bad practice, because the parent's state changes behind its back.

Since Vue 3.5, destructuring defineProps() keeps reactivity in <script setup> and supports default values with plain JavaScript defaults.

Key Points

• Parent to child, read-only in the child.
• Changes go up via events.
• Local copy (ref) or derived value (computed).
• Object props are shared references.

Deep dive: Code Clinic: review a Vue comment list