Что такое реквизиты (props) во Vue?

Реквизиты (англ. props) — это способ передачи данных от родительского компонента к дочернему в Vue.js. Они определяют интерфейс компонента, делая его переиспользуемым и конфигурируемым без жёсткой привязки к внутреннему состоянию.

Зачем нужны реквизиты?

Компонентная декомпозиция. Вынесите логику и шаблон в отдельный компонент, передав ему только необходимые данные.
Переиспользуемость. Один и тот же компонент можно использовать в разных местах с разными значениями props.
Ясность интерфейса. Объявляя props, вы документируете ожидания компонента и получаете статическую проверку.

Объявление реквизитов

Options API

export default {
  name: "UserCard",
  props: {
    // обязательно, тип String
    name: {
      type: String,
      required: true
    },
    // опционально, тип Number, значение по умолчанию
    age: {
      type: Number,
      default: 18
    },
    // простая валидация
    isActive: {
      type: Boolean,
      validator: value => typeof value === "boolean"
    }
  }
};

Composition API

import { defineComponent } from "vue";

export default defineComponent({
  name: "UserCard",
  props: {
    name: { type: String, required: true },
    age: { type: Number, default: 18 },
    isActive: Boolean
  },
  setup(props) {
    // props.name, props.age, props.isActive доступны здесь
    return { props };
  }
});

Не изменяйте props внутри компонента:

props — это входящие данные; для внутреннего состояния используйте data или ref в Composition API.

Пример использования

<template>
  <div class="user-card">
    <h2>{{ name }}</h2>
    <p>Возраст: {{ age }}</p>
    <p v-if="isActive">Статус: Активен</p>
  </div>
</template>

<script>
export default {
  props: ["name", "age", "isActive"]
};
</script>

Note:

В Composition API можно деструктурировать props сразу в setup: setup({ name, age, isActive }) { /* … */ }

Шаги работы с реквизитами

1. Объявите props

Определите свойство props в компоненте с указанием типа и правил (required, default, validator).

2. Передайте значения

В родительском компоненте используйте атрибуты: <UserCard name="Иван" :age="30" :isActive="true" />

3. Используйте внутри

Обращайтесь к props как к реактивным переменным: {{ name }}, {{ age }}.