Vue 3·Vue from reactivity to a routed app

Components and props

Split the interface into components with typed, one-way props.

Intermediate 14 min read Lesson 6 of 300 Challenge included

What you will be able to do

Use defineProps to declare inputs.
Keep props one-way: parent to child.
Use withDefaults for optional props.
Compose small components instead of gigantic pages.

In plain English

Props are inputs owned by the parent. A child must not mutate a prop; it should emit an event or receive a callback. Type your props with defineProps and give sensible defaults so the component is easy to use.

LessonCard.vueJavaScript

<script setup>
const props = withDefaults(defineProps<{
  title: string
  minutes?: number
}>(), { minutes: 10 })
</script>

<template>
  <article>
    <h2>{{ props.title }}</h2>
    <p>{{ props.minutes }} minutes</p>
  </article>
</template>

Your turn

Make minutes optional

Easy

Give a minutes prop a default of 10.

JAVASCRIPT · starter

defineProps<{ minutes: number }>()

Check your understanding before moving on.

Knowledge checkQuestion 1

Who owns a prop?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Emits and slots

Lesson 6 of 300 · 0% of course