Component Props and Emits
Pass data down with defineProps, emit events up with defineEmits, and validate props with type and required constraints.
Props in Vue 3
Props pass data from parent to child. In <script setup>, use defineProps() to declare them. Props are read-only in the child — never mutate them directly.
<script setup lang="ts">
const props = defineProps<{
title: string;
count?: number;
variant?: 'primary' | 'secondary';
}>();
</script>
<template>
<h2>{{ title }} ({{ count ?? 0 }})</h2>
</template>withDefaults for Prop Defaults
Wrap defineProps() with withDefaults() to supply default values.
<script setup lang="ts">
const props = withDefaults(defineProps<{
count?: number;
variant?: 'primary' | 'secondary';
}>(), {
count: 0,
variant: 'primary'
});
</script>All lessons in this course
- Vue SFC: script template style
- Options API: data methods computed
- Directives: v-if v-for v-bind v-on
- Component Props and Emits