Suggest an edit

Improve this article

Refine the answer for “What are `props` in Vue?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts437 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.