Slot con scope: passaggio dei dati al componente padre
slot :data='value', v-slot='{ data }' nel componente padre, pattern render prop
Slot con scope: passaggio dei dati al componente padre è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Il limite degli slot normali
Gli slot normali consentono al componente padre di passare markup al componente figlio, ma il padre non può accedere ai dati interni del figlio. Gli slot con ambito risolvono il problema permettendo al componente figlio di esporre dati al contenuto dello slot.
Associare dati a uno slot
Il componente figlio associa attributi al proprio elemento <slot>: questi attributi sono chiamati prop dello slot. Vengono passati a qualsiasi contenuto renderizzato dal componente padre.
<!-- List.vue -->
<ul>
<li v-for="(item, i) in items" :key="item.id">
<slot :item="item" :index="i"></slot>
</li>
</ul>Ricevere le prop dello slot
Nel componente padre, il valore di v-slot diventa un oggetto contenente tutte le prop dello slot associate dal componente figlio.
<List :items="users">
<template v-slot:default="slotProps">
{{ slotProps.index }}: {{ slotProps.item.name }}
</template>
</List>Destructuring delle prop dello slot
Poiché il valore dello slot è semplicemente un oggetto, può scomporlo inline per ottenere un codice più leggibile.
<List :items="users">
<template v-slot:default="{ item, index }">
{{ index }}: {{ item.name }}
</template>
</List>Scorciatoia per lo slot con ambito predefinito
Quando utilizza solo lo slot predefinito, può inserire v-slot direttamente nel tag del componente invece di usare un template annidato.
<List :items="users" v-slot="{ item }">
{{ item.name }}
</List>Rinominare e impostare valori predefiniti
Il destructuring supporta la ridenominazione e i valori predefiniti, proprio come il normale JavaScript.
<template v-slot:default="{ item: user, index = 0 }">
{{ index }} - {{ user.name }}
</template>Slot con nome e ambito
Anche gli slot con nome possono avere un ambito. Combini il nome con le prop scomposte.
<DataTable :rows="rows">
<template #cell="{ value, column }">
<strong>{{ column }}: {{ value }}</strong>
</template>
</DataTable>Componenti renderless
Gli slot con ambito consentono di adottare il pattern del componente renderless: un componente gestisce la logica e lo stato, ma non esegue il rendering di markup proprio; espone semplicemente i dati tramite uno slot con ambito e lascia al componente padre la scelta dell'interfaccia.
Un tracker del mouse renderless
Il componente tiene traccia del cursore ed espone le coordinate. Esegue il rendering solo del proprio slot predefinito, passando x e y.
<!-- Mouse.vue setup -->
<slot :x="x" :y="y"></slot>Usare il componente renderless
Il componente padre fornisce tutti gli elementi visivi e legge i dati esposti, separando completamente la logica dalla presentazione.
<Mouse v-slot="{ x, y }">
<p>Cursor is at {{ x }}, {{ y }}</p>
</Mouse>Slot con ambito e composable a confronto
In Vue 3, i composable spesso sostituiscono i componenti renderless per riutilizzare la sola logica. Tuttavia, gli slot con ambito rimangono la scelta migliore quando il componente figlio deve controllare l'iterazione o la struttura, ad esempio di una lista o di una tabella, mentre il componente padre personalizza ogni elemento.
Verifica rapida
In che modo un componente padre riceve i dati esposti da uno slot con ambito?
Riepilogo
Ha imparato che gli slot con ambito consentono al componente figlio di esporre dati verso il componente padre associando prop al proprio <slot>. Il componente padre li legge tramite il valore di v-slot, spesso con il destructuring, consentendo di creare componenti renderless che separano la logica dalla presentazione.
Domande Frequenti
La lezione «Slot con scope: passaggio dei dati al componente padre» è gratuita?
Sì — il testo completo di «Slot con scope: passaggio dei dati al componente padre» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.
Cosa imparerò in «Slot con scope: passaggio dei dati al componente padre»?
slot :data='value', v-slot='{ data }' nel componente padre, pattern render prop Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Slot con scope: passaggio dei dati al componente padre»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Slot con nome e slot predefinito
- Slot con scope: passaggio dei dati al componente padre
- Nomi dinamici degli slot
- Contenuto di fallback degli slot e verifica degli slot