Slot nominati in Vue 3: comporre componenti senza nuove props

Uno slot nominato è un buco con un nome: il figlio dichiara <slot name="header">, il genitore riempie con <template #header>. Il componente resta senza props e senza logica di contenuto.

Il componente che detta il layout

defineProps();



  
    
      
        {{ title }}
      
    

    

    
      
    
  

Il contenuto dentro <slot> è il fallback: appare solo se il genitore non passa nulla. Così la card funziona da sola e accetta personalizzazioni quando servono.

Slot con scope: dati dal figlio al genitore

const rows = [
  { id: 1, name: "Ada", role: "admin" },
  { id: 2, name: "Linus", role: "editor" },
];



  
    
      
        {{ row.name }}
      
    
  

Il figlio decide quali dati esporre, il genitore come mostrarli. È la differenza con una prop: qui la struttura resta nel figlio e la resa grafica nel genitore.

Slot o props?

Errori comuni

• Rinominare uno slot senza aggiornare il genitore: il contenuto può sparire senza un errore visibile.
• Mettere #header e v-slot sullo stesso tag: il compilatore segnala un errore di sintassi.
• Dimenticare il fallback: con il genitore senza contenuto resta un buco nel layout.
• Usare uno slot dentro un v-for senza :key sul nodo esterno alla lista.

Il limite da mettere in conto

Gli slot non hanno un contratto di tipo sul contenuto: TypeScript controlla i dati di uno scoped slot, non ciò che il genitore scrive dentro. Un nome sbagliato produce un buco silenzioso, non un errore di compilazione.

Dove continuare

Nel catalogo: shadcn-vue, vue-bits e Ant Design Vue; i layout pronti sono in /blocks. Le guide: Composition API e props che non si aggiornano. Il confronto: Vue vs React, dove lo stesso problema si risolve con children.