Vue 22: Props — Passing Data Down
easy⏱ 5 mincoursevue
Declaring props with validation
Instead of a simple array of names, props can be an object where each key maps to a spec: { type: Number, required: true, default: 0, validator: (v) => v >= 0 }. Vue checks these at runtime in development and warns in the console when a passed value doesn't match.
<!-- ProgressBar.vue -->
<script>
export default {
props: {
label: { type: String, required: true },
value: {
type: Number,
default: 0,
validator: (v) => v >= 0 && v <= 100,
},
},
};
</script>
One-way data flow
Props always flow down from parent to child, never back up automatically. A child should never mutate a prop directly — if it needs to change the value, it should ask the parent to do so (you'll learn the exact mechanism, events, in the next lesson).
Build ProgressBar
Declare label as a required String and value as a Number with default: 0 and a validator restricting it to 0-100. Use ProgressBar at least twice in App with different values.