🔗 Props, Events, and Communication

The Communication Model

Vue enforces a deliberately simple rule for parent-child communication: props go down, events go up. The parent hands data to the child through props; the child asks the parent to change something by emitting an event. Neither side reaches into the other's internals.

The core flow (props down, events up), plus the escape hatches for deeper communication.

💡 A useful analogy: Think of a company. A manager (parent) assigns tasks and information to an employee (child) — that's props flowing down. The employee files reports and requests back up to the manager — that's events. The employee never rewrites the manager's plans directly; they send a report and let the manager decide. For company-wide policy that everyone needs, there's a shared handbook (a Pinia store).

This lesson focuses on the two everyday tools — props and events — plus slots for passing markup, and touches on provide/inject for the occasional deep hand-off.

Props: Data Down

A prop (short for "property") is a custom attribute a parent sets on a child. In <script setup> you declare props with the defineProps compiler macro — no import needed.

<!-- BlogPost.vue -->
<template>
  <article>
    <h2>{{ title }}</h2>
    <p>{{ likes }} likes</p>
  </article>
</template>

<script setup>
// Object syntax lets you specify a type per prop
const props = defineProps({
  title: String,
  likes: Number
})
</script>

The parent passes props like HTML attributes. Use a plain attribute for a literal string, and v-bind (shorthand :) to pass a JavaScript expression:

<!-- A static string -->
<BlogPost title="My Journey with Vue" :likes="0" />

<!-- Dynamic values from parent state -->
<BlogPost :title="post.title" :likes="post.likes" />

<!-- Spread an object to pass many props at once -->
<BlogPost v-bind="post" />

Prop Validation

Beyond a bare type, the object syntax lets you mark a prop required, give it a default, and even run a custom validator. Validation catches bugs early in development and doubles as living documentation of how the component expects to be used.

const props = defineProps({
  // Basic type check
  username: String,

  // Multiple allowed types
  id: [String, Number],

  // Required prop — Vue warns if it's missing
  author: {
    type: Object,
    required: true
  },

  // Default value for a simple type
  status: {
    type: String,
    default: 'draft'
  },

  // Objects/arrays need a FACTORY function for their default
  tags: {
    type: Array,
    default: () => []
  },

  // Custom validator: return true if the value is acceptable
  priority: {
    type: Number,
    validator: (value) => value >= 1 && value <= 5
  }
})

If you use TypeScript, you can declare props with a type annotation instead, and Vue derives the runtime checks for you:

<script setup lang="ts">
interface Props {
  title: string
  likes?: number          // optional
  author: { name: string; email: string }
}

const props = defineProps<Props>()
</script>

One-Way Data Flow

Props form a one-way, top-down binding: when the parent's value changes, it flows into the child, but the child must not write back to the prop. This keeps data flow easy to follow — you always know a value's owner. Vue will warn you in the console if you mutate a prop directly.

Two situations tempt you to mutate a prop. Here's the right way to handle each:

1. Using a prop as an initial value

<script setup>
import { ref } from 'vue'

const props = defineProps(['initialCount'])

// ✅ Copy it into local state you own and are free to change
const count = ref(props.initialCount)
</script>

2. Transforming a prop

<script setup>
import { computed } from 'vue'

const props = defineProps(['size'])

// ✅ Derive a new value with computed — the prop stays untouched
const normalizedSize = computed(() => props.size.trim().toLowerCase())
</script>

Events: Messages Up

When a child needs to tell its parent something happened, it emits an event. Declare the events a component can emit with defineEmits, then call the returned function with the event name and an optional payload.

<!-- CounterButton.vue -->
<template>
  <button @click="onClick">Clicked {{ count }} times</button>
</template>

<script setup>
import { ref } from 'vue'

const emit = defineEmits(['increment'])
const count = ref(0)

function onClick() {
  count.value++
  // Notify the parent, passing the new count as the payload
  emit('increment', count.value)
}
</script>

The parent listens with v-on (shorthand @). The payload arrives as the handler's argument:

<template>
  <p>Total across all buttons: {{ total }}</p>
  <CounterButton @increment="handleIncrement" />
</template>

<script setup>
import { ref } from 'vue'
import CounterButton from './CounterButton.vue'

const total = ref(0)
function handleIncrement(newCount) {
  total.value = newCount
}
</script>

const emit = defineEmits<{
  (e: 'increment', value: number): void
  (e: 'submit', payload: { email: string; password: string }): void
}>()

v-model on Components

You already know v-model for form inputs. On a custom component it's simply sugar for a prop plus an event. In Vue 3.4+, the ergonomic way to support it is the defineModel macro, which gives you a writable ref that stays in sync with the parent automatically.

<!-- CustomInput.vue (Vue 3.4+) -->
<template>
  <input v-model="model" />
</template>

<script setup>
// One line: creates the prop + update event and returns a writable ref
const model = defineModel()
</script>

<!-- Parent -->
<CustomInput v-model="searchText" />

Under the hood, <CustomInput v-model="searchText" /> expands to a modelValue prop and an update:modelValue event. If you're on an older Vue or want to see the mechanics, here's the explicit version:

<!-- CustomInput.vue (explicit form) -->
<template>
  <input
    :value="modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>

<script setup>
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

Named and multiple bindings

A component can expose more than one v-model by naming them. defineModel('firstName') pairs with v-model:first-name on the parent:

<!-- NameFields.vue -->
<script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script>

<!-- Parent -->
<NameFields
  v-model:first-name="user.firstName"
  v-model:last-name="user.lastName"
/>

Slots: Content In

Props pass data; slots pass markup. A slot is a placeholder inside a child where the parent injects its own template content. This is how you build flexible container components like cards, layouts, and lists.

Default slot

<!-- BaseCard.vue -->
<template>
  <div class="card">
    <h3>{{ title }}</h3>
    <!-- Parent content lands here; the text is fallback -->
    <slot>Nothing here yet.</slot>
  </div>
</template>

<!-- Parent -->
<BaseCard title="Profile">
  <p>Name: Ada Lovelace</p>
  <p>Role: Engineer</p>
</BaseCard>

Named slots

Multiple slots need names. Define them with <slot name="header"> and fill them with <template #header>:

<!-- PageLayout.vue -->
<template>
  <header><slot name="header" /></header>
  <main><slot /></main>
  <footer><slot name="footer" /></footer>
</template>

<!-- Parent -->
<PageLayout>
  <template #header><h1>Dashboard</h1></template>

  <p>This goes in the default slot.</p>

  <template #footer><small>&copy; 2026</small></template>
</PageLayout>

Scoped slots

A scoped slot lets the child pass data back to the parent's slot content — perfect for a list component that owns the data but delegates how each row looks:

<!-- ItemList.vue -->
<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      <!-- Expose item + index to the parent's template -->
      <slot :item="item" :index="index">{{ item.name }}</slot>
    </li>
  </ul>
</template>

<script setup>
defineProps({ items: { type: Array, required: true } })
</script>

<!-- Parent: destructure the slot props the child exposed -->
<ItemList :items="products">
  <template #default="{ item, index }">
    <strong>{{ index + 1 }}.</strong> {{ item.name }} — ${{ item.price }}
  </template>
</ItemList>

Hands-on Exercise

<!-- StarRating.vue -->
<template>
  <div class="star-rating">
    <button
      v-for="n in max"
      :key="n"
      type="button"
      class="star"
      :class="{ filled: n <= rating }"
      :aria-label="`Rate ${n} of ${max}`"
      @click="rating = n"
    >
      ★
    </button>
  </div>
</template>

<script setup>
const rating = defineModel({ default: 0 })
defineProps({
  max: { type: Number, default: 5 }
})
</script>

<style scoped>
.star { background: none; border: none; font-size: 1.6rem; cursor: pointer; color: #ccc; }
.star.filled { color: #f5b301; }
</style>

<!-- Parent -->
<template>
  <StarRating v-model="score" />
  <p>You rated: {{ score }}/5</p>
</template>

<script setup>
import { ref } from 'vue'
import StarRating from './StarRating.vue'
const score = ref(3)
</script>

Best Practices

Summary & Quiz

📚 Further Reading

• Vue.js — Props
• Vue.js — Component Events
• Vue.js — Component v-model & defineModel
• Vue.js — Slots

🚀 What's Next?

You've now seen ref, computed, and lifecycle hooks in passing. Next we go all-in on the Composition API Fundamentals — reactivity, watchers, template refs, and extracting reusable logic into composables.