props Receive Parent Data
Last updated: 2026-10-22
props Receive Parent Data
props declares the attributes a component accepts, with array shorthand or object syntax for type, required and defaults.
| Group | Options: State |
|---|---|
| Kind | Option |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
export default {
props: {
title: { type: String, required: true },
count: { type: Number, default: 0 }
}
}⚙️ Arguments
| value | Array or object; the object form adds type, required, default and validator |
|---|
Returns：The values passed by the parent; readonly (one-way data flow)
▶ Example
Edit the code below and see the live result:
Output：
Shows 'Greeting (3 items)'.💡 Key Points
⚠️ Warning One-way flow: never mutate a prop — emit an event so the parent updates it.
💡 Tip Object and array defaults need factories: default: () => [].
ℹ️ Note kebab-case attributes map to camelCase props.
🏷️ Related State
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q What happens if a child mutates a prop?
A It warns in dev and gets overwritten on the parent re-render — emit instead.
Q Why do object defaults warn?
A Instances would share one object; factories give each a fresh copy.
Q Can I watch props?
A Yes — watch the prop by name, or derive with computed.
