Props are custom attributes a parent uses to pass data down to a child component. In <script setup> you declare them with defineProps(), and the object form lets Vue validate each prop.
<script setup>
defineProps({
title: String, // basic type check
age: {
type: Number,
required: true,
validator: (value) => value >= 0
},
message: { type: String, default: 'Hello World' },
tags: { type: Array, default: () => [] } // array and object defaults need a factory function
})
</script>
The type can be any native constructor, such as String, Number or Date. It can also be a custom constructor function, or an array of types like [String, Number]. When a check fails, Vue logs a console warning in the development build. The Options API takes the same object in its props option.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓