Props for parent to child data in Vue

Introduction

Props let a parent component send information to its child component. This helps components share data easily.

You want to show a message from a parent component inside a child component.

You need to pass user details from a main page to a profile card component.

You want to customize a button's label from the parent component.

You want to reuse a component but with different data each time.

You want to control child component behavior based on parent data.

Syntax

Vue

<ChildComponent :propName="value" />

// Inside ChildComponent
props: {
  propName: Type
}

Use : or v-bind: to pass dynamic values.

Declare props in the child component to receive data.

Examples

Passing a simple string message from parent to child.

Vue

<ChildComponent :message="'Hello!'" />

// ChildComponent
props: {
  message: String
}

Passing a number value as a prop.

Vue

<ChildComponent :count="5" />

// ChildComponent
props: {
  count: Number
}

Passing an object with user details.

Vue

<ChildComponent :user="userObject" />

// ChildComponent
props: {
  user: Object
}

Sample Program

The parent sends a greeting string to the child using a prop. The child shows this greeting inside a paragraph.

Vue

<template>
  <div>
    <ChildComponent :greeting="parentGreeting" />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'

const parentGreeting = 'Hello from Parent!'
</script>


// ChildComponent.vue
<template>
  <p>{{ greeting }}</p>
</template>

<script setup>
const props = defineProps({
  greeting: String
})
</script>

Important Notes

Props are read-only inside the child component. Don't try to change them there.

Always declare the expected prop types for better code clarity and error checking.

Use kebab-case in templates for prop names with multiple words (e.g., my-prop), but camelCase in script.

Summary

Props pass data from parent to child components.

Declare props in the child to receive data.

Props are read-only inside the child component.