Components and Props

Single-File Components

Vue apps are built from components – reusable pieces of UI. Each lives in a .vue file with three sections: the markup, the logic, and scoped styles.

<template>
  <div class="card">{{ title }}</div>
</template>

<script setup>
defineProps(['title'])
</script>

<style scoped>
.card { padding: 1rem; }
</style>

Props: passing data down

Props are inputs a parent passes to a child. The child declares them and treats them as read-only:

<!-- child -->
<script setup>
const props = defineProps({
  title: String,
  count: { type: Number, default: 0 }
})
</script>

<!-- parent uses it -->
<ProductCard title="Keyboard" :count="5" />

Emits: sending events up

Data flows down via props; to communicate up, a child emits an event the parent listens to:

<!-- child -->
<script setup>
const emit = defineEmits(['delete'])
</script>
<button @click="emit('delete', id)">Remove</button>

<!-- parent -->
<ProductCard @delete="removeItem" />

This “props down, events up” pattern keeps data flow predictable.

Slots

A slot lets a parent inject markup into a child, making components composable:

<!-- child: Card.vue -->
<div class="card"><slot /></div>

<!-- parent -->
<Card><p>Any content here</p></Card>

Key points

• Components are .vue files with template, script and scoped style.
• Props pass read-only data from parent to child (defineProps).
• Children send events up with defineEmits – “props down, events up”.
• Slots let parents inject content, making components composable.