Slot e slot con ambito
Costruisca componenti flessibili utilizzando slot e slot con ambito.
Slot e slot con ambito è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 3. 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 3 lezioni in totale.
Che cosa sono gli slot?
Gli slot permettono al componente padre di inserire contenuti nel template del componente figlio.
- Le props passano dati; gli slot passano markup
- Sono ideali per contenitori di layout, card e finestre modali
- È il componente figlio a decidere dove inserire il contenuto
Lo slot predefinito
Il componente figlio definisce un segnaposto con l'elemento slot. Qualunque contenuto inserito dal componente padre tra i tag lo riempie.
<!-- Card.vue (child) -->
<template>
<div class="card">
<slot></slot>
</div>
</template>Utilizzo dello slot predefinito
Il componente padre passa il contenuto tra i tag del componente.
<!-- Parent -->
<Card>
<h2>Title</h2>
<p>Any content goes here.</p>
</Card>
<!-- It renders inside the card div -->Contenuto di fallback dello slot
Uno slot può fornire contenuto di fallback, visualizzato quando il componente padre non passa alcun contenuto.
<!-- Button.vue -->
<template>
<button>
<slot>Click me</slot>
</button>
</template>
<!-- <Button /> shows "Click me";
<Button>Save</Button> shows "Save" -->Più slot denominati
Gli slot denominati permettono a un componente di esporre diversi punti di inserimento.
<!-- Layout.vue -->
<template>
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</template>Riempimento degli slot denominati
Il componente padre indirizza il contenuto verso uno slot denominato con v-slot:name su un tag template.
<Layout>
<template v-slot:header>
<h1>Site Title</h1>
</template>
<p>Main content (default slot)</p>
<template v-slot:footer>
<small>Copyright 2024</small>
</template>
</Layout>Abbreviazione di v-slot
v-slot ha un'abbreviazione: il simbolo #.
<Layout>
<template #header>
<h1>Title</h1>
</template>
<template #footer>
<small>Footer</small>
</template>
</Layout>Slot con scope
Gli slot con scope permettono al componente figlio di passare dati al contenuto dello slot.
- Il componente figlio associa i dati all'elemento slot
- Il componente padre li riceve come props dello slot
- Sono utili quando il componente figlio controlla i dati, ma il componente padre controlla l'aspetto
Esposizione dei dati dal componente figlio
Il componente figlio associa attributi allo slot per condividere i dati.
<!-- UserList.vue -->
<template>
<li v-for="user in users" :key="user.id">
<slot :user="user"></slot>
</li>
</template>Utilizzo dei dati di uno slot con scope
Il componente padre riceve i dati tramite v-slot.
<UserList>
<template #default="slotProps">
{{ slotProps.user.name }}
</template>
</UserList>
<!-- or destructure: #default="{ user }" -->Quando utilizzare ciascun tipo di slot
Guida rapida:
- Slot predefinito per un semplice inserimento di contenuti
- Slot denominati per più aree (layout)
- Slot con scope quando il componente padre ha bisogno dei dati interni del componente figlio
Verifica rapida
Verifichi la propria comprensione degli slot.
Riepilogo: slot
Ha imparato a distribuire i contenuti con gli slot:
- Lo slot predefinito inserisce il markup del componente padre
- Il contenuto di fallback viene visualizzato quando non viene passato alcun contenuto
- Gli slot denominati (v-slot:name, abbreviazione #) indirizzano il contenuto verso specifiche aree
- Gli slot con scope passano i dati del componente figlio al contenuto dello slot
Prossimo argomento: fondamenti della reattività.
Domande Frequenti
La lezione «Slot e slot con ambito» è gratuita?
Sì — il testo completo di «Slot e slot con ambito» è 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 3 lezioni in totale.
Cosa imparerò in «Slot e slot con ambito»?
Costruisca componenti flessibili utilizzando slot e slot con ambito. 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 3 di 3.
Quanto tempo richiede la lezione «Slot e slot con ambito»?
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
- Creazione e registrazione dei componenti
- Props ed eventi personalizzati
- Slot e slot con ambito