v-model в компоненте

В викторине Quantity получал количество пропсом и просил об изменениях двумя событиями. Компонент, который редактирует одно значение родителя, встречается так часто, что в Vue для этого есть сокращение: v-model, знакомый вам по текстовым полям, работает и на ваших собственных компонентах. Вот компонент для выбора размера чашки:

<SizePicker v-model="size" />

В компоненте defineModel() даёт вам это значение в виде рефа:

<script setup>
const size = defineModel();
</script>

<template>
    <div class="sizes">
        <button :class="{ chosen: size === 'regular' }" @click="size = 'regular'">Обычная</button>
        <button :class="{ chosen: size === 'large' }" @click="size = 'large'">Большая</button>
    </div>
</template>

size выглядит как собственный реф компонента, но им не является. Чтение даёт значение size из родителя. Изменение генерирует событие, которое ловит v-model в родителе, и меняет size родителя. Так что данные по-прежнему живут в одном месте, у родителя, а компоненту не пришлось объявлять ни проп, ни событие. (Под капотом v-model на компоненте — это проп с именем modelValue и событие с именем update:modelValue, которые defineModel() объявляет за вас.)

В скрипте это такой же реф, как любой другой, size.value. А defineModel() принимает те же параметры, что и проп, например defineModel({ type: String, required: true }).