Props and One-Way Data Flow

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Use defineProps
Bind dynamic props
Understand why you shouldn't mutate props

Let's break it down simply

Props flow one way, from parent to child. The child should never modify a prop directly — if it needs to change something, it should emit an event instead. Use type, required, and default validation to make the component's contract clear.

vue

<!-- ProductCard.vue -->
<script setup>
const props = defineProps({
  title: { type: String, required: true },
  price: { type: Number, default: 0 }
})
</script>

<template>
  <article>
    <h3>{{ props.title }}</h3>
    <p>{{ props.price.toLocaleString() }} MMK</p>
  </article>
</template>

You should see

Vue Handbook
18,000 MMK

Try it yourself

Build a UserBadge component with name, role, and online Boolean props.

Props — Vue.js

Easy traps

Mutating a prop directly inside the child
Passing a number prop as a string instead of using :price

Exercise

Build a UserBadge component with name, role, and online Boolean props.

You'll know it worked when: Vue Handbook 18,000 MMK