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

Как задать значение по умолчанию у define props?

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

Значение по умолчанию для `defineProps` (Vue 3) задают через `withDefaults` (в TypeScript) или объектный синтаксис `props` с полем `default`.

С TypeScript — withDefaults

Когда props типизированы через дженерик, значения по умолчанию задают функцией withDefaults:

<script setup lang="ts">
interface Props {
  title?: string;
  count?: number;
  items?: string[];
}

const props = withDefaults(defineProps<Props>(), {
  title: 'Заголовок',
  count: 0,
  items: () => [],  // для объектов/массивов — функция-фабрика
});
</script>

Без TypeScript — объектный синтаксис

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: 'Заголовок',
  },
  count: {
    type: Number,
    default: 0,
  },
  items: {
    type: Array,
    default: () => [], // объекты/массивы — через функцию
  },
});
</script>

Нюанс

Для объектов и массивов значение по умолчанию задают функцией-фабрикой (() => []), а не напрямую, иначе все экземпляры компонента разделят одну ссылку:

default: () => [] // правильно — новый массив на каждый экземпляр
default: []       // неправильно — общая ссылка

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

Значение по умолчанию для defineProps в Vue 3: с TypeScript — через withDefaults(defineProps<Props>(), { title: 'default' }); без TS — объектный синтаксис с полем default. Для объектов/массивов default задают функцией-фабрикой (() => []), чтобы экземпляры не делили общую ссылку.

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