Cosa sono gli slot e gli scoped slot?

Question

Accepted Answer

**Gli slot** permettono a un componente genitore di passare **contenuto template** a un componente figlio — sono il modo per costruire wrapper flessibili e riutilizzabili (card, modali, layout) dove il consumatore controlla il markup interno. ## Slot di base ```vue ``` ```vue

Title

Any content!

``` Il componente figlio definisce un "buco" (``); il genitore lo riempie con il markup che vuole. Questo è molto più flessibile che passare stringhe tramite prop. ## Slot nominati — multipli punti di inserimento ```vue ``` ```vue

Main content (default slot)

``` ## Scoped slot — il figlio passa i dati AL GENITORE nel contenuto dello slot A volte il componente figlio ha dati di cui il template dello slot del genitore ha bisogno (ad es. ogni elemento in una lista). **Gli scoped slot** espongono dati dal figlio al template del genitore: ```vue ``` ```vue ``` Gli scoped slot sono la chiave per i **componenti renderless/headless**: il figlio gestisce la logica (cicli, recupero dati, stato) e lascia che il genitore controlli completamente la presentazione. ## Perché è importante Gli slot sono il meccanismo di distribuzione del contenuto di Vue — essenziale per componenti layout e wrapper riutilizzabili. Gli slot nominati forniscono multipli punti di inserimento, e gli scoped slot (esponendo i dati del figlio ai template definiti dal genitore) abilitano pattern potenti come componenti headless e liste/tabelle personalizzabili. Sono quello che rende i componenti Vue composizionali piuttosto che rigidi.