Vue Academy · Lesson

Props and Custom Events

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

Props and Custom Events is a free Vue Academy lesson on CoddyKit — lesson 2 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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>

Props with Types

Declare props as an object to specify types for validation.

<script setup>
defineProps({
  title: String,
  count: Number,
  isActive: Boolean
})
</script>

Props with Defaults and Required

You can mark props required and give default values.

<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  }
})
</script>

Passing Props from a Parent

The parent passes data as attributes. Use : to bind dynamic values.

<template>
  <ProductCard
    title="Coffee Mug"
    :count="stock"
    :is-active="available"
  />
</template>

<!-- static string vs bound expression -->

Prop Naming Convention

Declare props in camelCase in JS, pass them in kebab-case in templates.

JS prop: isActive
Template attribute: :is-active

Vue automatically converts between the two.

Props Are Read-Only

A child must not mutate its props directly.

Props flow one way, down
Mutating them breaks predictability and triggers warnings
To change shared data, emit an event so the parent updates it

Declaring Emitted Events

A child declares the events it emits with defineEmits.

<script setup>
const emit = defineEmits(['increment', 'delete'])
</script>

Emitting an Event

Call the emit function to send an event up, optionally with a payload.

<script setup>
const emit = defineEmits(['add'])

function handleClick() {
  emit("add", { id: 1, name: "Item" })
}
</script>

<template>
  <button @click="handleClick">Add</button>
</template>

Emitting in the Options API

In the Options API you call this.$emit instead.

export default {
  emits: ["save"],
  methods: {
    onSave() {
      this.$emit("save", this.formData)
    }
  }
}

Parent Listening to Events

The parent listens with @event-name and receives the payload.

<template>
  <TodoItem
    :task="task"
    @delete="removeTask"
    @add="onAdd"
  />
</template>

<script setup>
function onAdd(item) {
  console.log("Added:", item.name)
}
</script>

Quick Check

Test your understanding of props and events.

Recap: Props and Events

You learned component communication:

defineProps declares props with types and defaults
Props flow down and are read-only
defineEmits declares events
emit("name", payload) sends events up
Parent listens with @event

Next: slots and scoped slots.

Frequently asked questions

Is the “Props and Custom Events” lesson free?

Yes — the full text of “Props and Custom Events” is free to read here on the web, and the Vue Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Props and Custom Events”?

Pass data down with props and emit events up to parents. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Props and Custom Events” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy