### 🧱 1. Define the child component
Let's say we have a child component called `Greeting.vue`:
```vue
<!-- Greeting.vue -->
<template>
<p>Hello, {{ name }}!</p>
</template>
<script setup>
defineProps({
name: String
})
</script>
```
Here, `name` is a **prop** that the component expects to receive.
---
### 🌱 2. Use the component and pass a prop from the parent
Now in your parent component (e.g., `App.vue`), you import and use the `Greeting` component and pass it a value for the `name` prop:
```vue
<!-- App.vue -->
<template>
<Greeting name="Alice" />
</template>
<script setup>
import Greeting from './Greeting.vue'
</script>
```
---
### ✅ Result
This will render:
```
Hello, Alice!
```
---