v-model bei einer Komponente

Im Quiz hat Menge die Anzahl als Prop bekommen und mit zwei Ereignissen um Änderungen gebeten. Eine Komponente, die einen einzigen Wert ihres Elternteils bearbeitet, ist so häufig, dass Vue dafür eine Abkürzung hat: v-model, das du von Textfeldern kennst, funktioniert auch bei deinen eigenen Komponenten. Hier ist eine Komponente, mit der man die Größe einer Tasse wählt:

<Groessenauswahl v-model="groesse" />

In der Komponente gibt dir defineModel() diesen Wert als Ref:

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

<template>
    <div class="groessen">
        <button :class="{ gewaehlt: groesse === 'normal' }" @click="groesse = 'normal'">Normal</button>
        <button :class="{ gewaehlt: groesse === 'gross' }" @click="groesse = 'gross'">Groß</button>
    </div>
</template>

groesse sieht aus wie die eigene Ref der Komponente, ist es aber nicht. Liest du sie, bekommst du die groesse des Elternteils. Änderst du sie, sendet sie ein Ereignis, das v-model im Elternteil auffängt, und es ändert die groesse des Elternteils. Die Daten leben also weiterhin an einem Ort, im Elternteil, und die Komponente musste weder eine Prop noch ein Ereignis deklarieren. (Im Hintergrund ist v-model bei einer Komponente genau das: eine Prop namens modelValue und ein Ereignis namens update:modelValue, die defineModel() für dich deklariert.)

Im Skript ist es eine Ref wie jede andere, groesse.value. Und defineModel() nimmt dieselben Optionen wie eine Prop, zum Beispiel defineModel({ type: String, required: true }).