Props are values a component receives from its parent, while data is the state the component owns. The Options API declares that state in the data() function. In <script setup>, defineProps() declares the props and ref() creates the local state.
Props are an external data source and are read-only. Vue follows one-way data flow: a parent's change flows down to the child, never back up. When you declare prop types, Vue also validates props against them.
data is the component's internal state, private to it, mutable and reactive.
export default {
props: ['message'], // From parent
data() {
return {
localMessage: '' // Component's own data
}
}
}
When a child needs to change a prop, it emits an event and lets the parent update it. When it only needs a starting value, it copies the prop into its own data.
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
