v-model na komponentě

V kvízu dostávala komponenta Mnozstvi počet jako props a o změny žádala dvěma událostmi. Komponenta, která upravuje jednu hodnotu svého rodiče, je tak běžná, že pro ni Vue má zkratku: v-model, který znáte z textových polí, funguje i na vlastních komponentách. Tady ho rodič používá na komponentě pro výběr velikosti šálku:

<VolbaVelikosti v-model="velikost" />

V komponentě vám tuto hodnotu jako ref dá defineModel():

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

<template>
    <div class="velikosti">
        <button :class="{ vybrana: velikost === 'normalni' }" @click="velikost = 'normalni'">Normální</button>
        <button :class="{ vybrana: velikost === 'velky' }" @click="velikost = 'velky'">Velký</button>
    </div>
</template>

velikost vypadá jako vlastní ref komponenty, ale není. Když ji čtete, dostanete velikost rodiče. Když ji změníte, vyšle se událost, kterou v-model v rodiči zachytí a změní velikost rodiče. Data tak pořád žijí na jednom místě, v rodiči, a komponenta nemusela deklarovat props ani událost. (Přesně tohle je totiž v-model na komponentě: props jménem modelValue a událost jménem update:modelValue, které defineModel() deklaruje za vás.)

Ve skriptu je to ref jako každý jiný, velikost.value. A defineModel() přijímá stejné možnosti jako props, třeba defineModel({ type: String, required: true }).