Що таке `props` у Vue?

VueJunior~1 хв читання

Props у Vue - це вхідні параметри компонента, за допомогою яких батько передає дані дочірньому компоненту.

Простіше кажучи:

props - це спосіб передати дані «зверху вниз», від батька до дитини.
Це аналог аргументів функції, але для компонентів.

Простий приклад

Батько:

javascript

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

Дочірній компонент (`UserCard.vue`):

javascript

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

<template>
  <p>{{ name }} - {{ age }} років</p>
</template>

Тепер дочірній компонент отримує:

name="Tim"
age="28"

Навіщо потрібні props?

Props вирішують декілька завдань:

Передати дані від батька до дитини

Наприклад: текст кнопки, користувача, список товарів, налаштування компонента.

Робити компоненти універсальними

Один компонент - багато варіантів.

Створювати конфігурацію поведінки

Наприклад: <Modal :open="true" />.

Як оголошувати props у Vue 3?

Спосіб 1. Через `<script setup>` - сучасно та зручно

javascript

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

Після цього title, count, isActive доступні в шаблоні.

Спосіб 2. Через Options API (старий стиль)

javascript

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

Типи пропсів

Можна описувати:

Тип

javascript

title: String

Тип + типове значення

javascript

count: { type: Number, default: 0 }

Required (обов'язковий)

javascript

user: { type: Object, required: true }

Валідація

javascript

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

Не можна змінювати props усередині компонента

Це важливе правило:

неправильно:

javascript

props.count++

правильно:

створити локальну копію

або

передавати подію emit батьку, щоб він оновив значення

Односторонній потік даних

Props ідуть тільки зверху вниз:

javascript

Parent → Child

Це робить роботу застосунку передбачуваною та зменшує кількість багів.

Приклад: кнопка, що налаштовується через props

javascript

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

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

Використання:

javascript

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

Підсумок (шпаргалка)

Props - це вхідні параметри компонента.

Вони дозволяють:

передавати дані від батька до дитини,
конфігурувати інтерфейс,
робити компоненти універсальними.

У Vue 3 props оголошують через:

javascript

defineProps({ ... })

Props не можна змінювати, але їх можна валідувати, робити обов'язковими та задавати їм значення за замовчуванням.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.