0Pricing
Vue Academy · Lesson

Props and Custom Events

Pass data down with props and emit events up to parents.

Parent-Child Communication

Components talk in two directions:

  • Props pass data down from parent to child
  • Events send messages up from child to parent

This one-way data flow keeps apps predictable.

Declaring Props

A child declares the props it accepts. In script setup, use defineProps.

<script setup>
const props = defineProps(['title', 'count'])
</script>

<template>
  <h2>{{ title }}</h2>
  <p>{{ count }}</p>
</template>

All lessons in this course

  1. Creating and Registering Components
  2. Props and Custom Events
  3. Slots and Scoped Slots
← Back to Vue Academy