Textové pole pro poznámku

Komponenta může obalit i textové pole. Textové pole pro hledání v nabídce s tlačítkem, které hledaný text smaže, může být samostatná komponenta:

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

<template>
    <input v-model="hledanyText" placeholder="Hledat v nabídce">
    <button @click="hledanyText = ''">Smazat</button>
</template>

v-model="hledanyText" na <input> propojí textové pole s modelem komponenty a v-model v rodiči propojí model s proměnnou rodiče:

<Hledani v-model="hledanyText" />

Co zákazník napíše, tak doputuje až do proměnné hledanyText v rodiči a rodič podle toho může nabídku filtrovat ve vypočítané hodnotě. Kliknutí na Smazat nastaví model na '', což vyprázdní hledanyText rodiče a s ním i textové pole.

Komponenta přidá to, co k textovému poli patří: jeho vzhled, popisek nebo nápovědu, tlačítko Smazat. Rodič jen napíše <Hledani v-model="hledanyText" /> a o podrobnosti se nestará. I tady data žijí na jednom místě, v rodiči, a komponenta je jen ukazuje a mění přes model.