Components and Props

Create a child component

Save as GreetingItem.vue.

<!-- GreetingItem.vue -->
<script setup>
defineProps({
  name: { type: String, required: true },
});
</script>

<template>
  <p>Hello, {{ name }}!</p>
</template>

Use it from a parent

Import and register automatically with script setup imports.

<script setup>
import GreetingItem from "./GreetingItem.vue";
</script>

<template>
  <GreetingItem name="Sam" />
</template>

Props are one-way

Children should not mutate props. Emit an event or use a v-model pattern to ask the parent to change data.

Multiple props

Declare each prop with a type for clearer errors while learning.

defineProps({
  title: String,
  count: { type: Number, default: 0 },
});