What are `props` in Vue?

VueJunior~1 min read

Props in Vue are the input parameters of a component, through which a parent passes data to a child component.

In other words:

Props are a way to pass data "top-down," from parent to child.
They are the equivalent of function arguments, but for components.

Simple example

Parent:

javascript

<UserCard :name="userName" :age="28" />

Child component (`UserCard.vue`):

javascript

<script setup>
const props = defineProps({
  name: String,
  age: Number
})
</script>

<template>
  <p>{{ name }} - {{ age }} years old</p>
</template>

Now the child component receives:

name="Tim"
age="28"

Why are props needed?

Props solve several problems:

Passing data from parent to child

For example: button text, the user, a list of products, a component's settings.

Making components universal

One component - many variations.

Creating behavior configuration

For example: <Modal :open="true" />.

How do you declare props in Vue 3?

Method 1. Via `<script setup>` - modern and convenient

javascript

<script setup>
const props = defineProps({
  title: String,
  count: {
    type: Number,
    default: 0
  },
  isActive: Boolean
})
</script>

After this, title, count, and isActive are available in the template.

Method 2. Via the Options API (old style)

javascript

<script>
export default {
  props: {
    title: String,
    count: {
      type: Number,
      default: 0
    }
  }
}
</script>

Types of props

You can describe:

Type

javascript

title: String

Type + default value

javascript

count: { type: Number, default: 0 }

Required

javascript

user: { type: Object, required: true }

Validation

javascript

age: {
  type: Number,
  validator: value => value > 0
}

You cannot change props inside a component

This is an important rule:

wrong:

javascript

props.count++

right:

create a local copy

emit an event to the parent so it updates the value

One-way data flow

Props flow only top-down:

javascript

Parent → Child

This makes the application's behavior predictable and reduces bugs.

Example: a button configured via props

javascript

<script setup>
const props = defineProps({
  label: String,
  type: {
    type: String,
    default: "primary"
  }
})
</script>

<template>
  <button :class="`btn-${type}`">{{ label }}</button>
</template>

Usage:

javascript

<BaseButton label="Save" type="success" />

Summary (cheat sheet)

Props are a component's input parameters.

They let you:

pass data from parent to child,
configure the interface,
make components universal.

In Vue 3, props are declared via:

javascript

defineProps({ ... })

Props cannot be changed, but they can be validated, made required, and given default values.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.