Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як оголошувати props?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Props можна оголошувати **двома способами**, залежно від того, який API ти використовуєш: **Options API** або **Composition API (**`setup` **/** `<script setup>`**)**.
На співбесіді важливо знати **обидва**.

---

## 1. Оголошення props в Options API

У компоненті ти вказуєш об'єкт `props`:

```js
export default {
  props: {
    title: String,
    count: Number,
    isActive: Boolean,
  }
}
```

Кожна властивість - це **prop**, яка може бути передана батьком.

Можна вказати розширену конфігурацію:

```js
props: {
  title: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  },
  user: {
    type: Object,
    default: () => ({}) // важливо: об'єкти через функцію
  }
}
```

---

## Аргументи в Options API

Можна задавати:

- `type` - тип даних
- `required` - обов'язковий проп
- `default` - значення за умовчанням
- `validator` - кастомна перевірка

---

## 2. Оголошення props в Composition API: setup()

Якщо використовуєш `setup()`, props передаються **першим аргументом**:

```js
export default {
  props: {
    title: String,
    count: Number
  },

setup(props) {
    console.log(props.title)
    console.log(props.count)
  }
}
```

**Важливо:** props - read-only, їх не можна змінювати.

---

## Деструктуризація в setup() → втрачаєш реактивність

Не можна так:

```js
const { title } = props // втрачається реактивність
```

Правильно:

```js
import { toRefs } from 'vue'

const { title, count } = toRefs(props)
```

---

## 3. Оголошення props в `<script setup>` (Vue 3)

Це найзручніший і найсучасніший спосіб.

Використовується функція `defineProps()`:

```vue
<script setup>
const props = defineProps({
  title: String,
  count: Number
})
</script>
```

Можна одразу деструктурувати (реактивність зберігається!):

```vue
<script setup>
const { title, count } = defineProps({
  title: String,
  count: Number
})
</script>
```

---

## Чому в `<script setup>` можна деструктурувати?

Тому що `defineProps` під капотом викликає `toRefs`, якщо ти робиш деструктуризацію - Vue сам перетворює властивості на реактивні refs.

---

## Приклад з типами props (розширений)

```vue
<script setup>
const props = defineProps({
  user: {
    type: Object,
    required: true
  },
  list: {
    type: Array,
    default: () => []
  },
  isActive: Boolean,
  count: {
    type: Number,
    default: 1,
  },
  validatorProp: {
    validator: v => ['small', 'medium', 'large'].includes(v)
  }
})
</script>
```

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати343 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.