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

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

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

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

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

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

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

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

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 передаються першим аргументом:

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

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

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

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

Не можна так:

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

Правильно:

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>

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

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

Premium

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

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

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

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

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

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

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

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

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