Back
VueEasyNew

What are props and how do you declare them in `<script setup>`?

defineProps macro

Ideal Answer

Props are custom attributes passed from a parent component to a child, forming one-way data flow downward. In <script setup>, you declare them with the compiler macro defineProps:

JavaScript
<script setup>
const props = defineProps({
  title: { type: String, required: true },
  count: { type: Number, default: 0 }
})
</script>

With TypeScript, you can use a type-only declaration instead:

JavaScript
const props = defineProps<{ title: string; count?: number }>()

Props are read-only in the child — Vue enforces one-way data flow, so mutating them directly is discouraged.