Ein Notizfeld

Eine Komponente kann auch ein Textfeld umhüllen. Ein Suchfeld für die Speisekarte mit einem Button, der es leert, kann eine eigene Komponente sein:

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

<template>
    <input v-model="suche" placeholder="Speisekarte durchsuchen">
    <button @click="suche = ''">Leeren</button>
</template>

v-model="suche" beim <input> verbindet das Feld mit dem Modell der Komponente, und v-model im Elternteil verbindet das Modell mit der Variablen des Elternteils:

<Suchfeld v-model="suche" />

Was der Kunde tippt, gelangt also ganz bis in die suche des Elternteils, und der Elternteil kann damit die Speisekarte filtern, in einem berechneten Wert. Ein Klick auf Leeren setzt das Modell auf '', was die suche des Elternteils leert und mit ihr das Feld.

Die Komponente fügt hinzu, was zum Feld gehört: sein Aussehen, ein Label oder einen Hinweis, den Button Leeren. Der Elternteil schreibt nur <Suchfeld v-model="suche" /> und muss sich um die Einzelheiten nicht kümmern. Auch hier leben die Daten an einem Ort, im Elternteil, und die Komponente zeigt sie nur an und ändert sie über das Modell.