Как задать значение по умолчанию у 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 задают функцией-фабрикой (() => []), чтобы экземпляры не делили общую ссылку.