PassFront
  1. PassFront
  2. База знаний
  3. Продвинутые темы

Как задаются props?

Продвинутые темы

Props задаются при использовании компонента как атрибуты: в React — через JSX-атрибуты, в Vue — через атрибуты с `:` для динамических значений. Компонент объявляет ожидаемые props.

В React

Props передаются как атрибуты JSX:

// Передача
<UserCard name="Ann" age={25} isActive={true} onClick={handleClick} />

// Приём (деструктуризация)
function UserCard({ name, age, isActive, onClick }) {
  return <div>{name}, {age}</div>;
}
  • Строки — в кавычках, остальное — в {}.
  • children — вложенный контент.
<Card>
  <p>Содержимое</p> {/* children */}
</Card>

В Vue

<!-- Передача -->
<UserCard title="Заголовок" :count="5" :items="list" @click="handleClick" />

<!-- Объявление -->
<script setup>
const props = defineProps(['title', 'count', 'items']);
// или с типами/дефолтами
const props = defineProps({ title: String, count: { type: Number, default: 0 } });
</script>
  • :prop — динамическое значение (выражение), без : — строка.

Общие принципы

  • Однонаправленный поток — props идут сверху вниз (родитель → ребёнок).
  • Только для чтения — компонент не меняет свои props.
  • Валидация — типы, обязательность, значения по умолчанию.

Коротко для собеседования

Props задаются при использовании компонента как атрибуты: React — JSX-атрибуты (<C name="a" age={25} />, строки в кавычках, прочее в {}); Vue — атрибуты с : для динамических значений (:count="5"). Компонент объявляет их (деструктуризация в React, defineProps в Vue). Props — сверху вниз, только для чтения.

Другие вопросы раздела