Slot con nome e slot predefinito
Più , , sintassi abbreviata #name
Slot con nome e slot predefinito è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 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.
Cosa sono gli slot
Gli slot consentono a un componente padre di passare del markup a un componente figlio. Il componente figlio decide dove visualizzare quel contenuto usando l'elemento <slot>. Questa è la distribuzione dei contenuti di Vue.
Lo slot predefinito
Uno <slot> senza nome è lo slot predefinito. Qualsiasi contenuto inserito dal componente padre tra i tag del componente viene visualizzato in quel punto.
<!-- Card.vue -->
<div class="card">
<slot></slot>
</div>Usare lo slot predefinito
Il componente padre deve semplicemente inserire il contenuto tra i tag del componente.
<Card>
<p>This goes into the default slot</p>
</Card>Perché usare gli slot con nome
Molti componenti hanno più punti di inserimento: un'intestazione, un corpo e un piè di pagina. Gli slot con nome assegnano un identificatore a ogni area, così il componente padre può indirizzarle singolarmente.
Dichiarare gli slot con nome
Aggiunga un attributo name a ogni slot. Un componente può combinare slot con nome e un solo slot predefinito (senza nome).
<!-- Card.vue -->
<div class="card">
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</div>Riempire gli slot con nome con v-slot
Nel componente padre, racchiuda il contenuto in un <template> con la direttiva v-slot:name per indirizzarlo a uno slot con nome.
<Card>
<template v-slot:header>
<h2>Title</h2>
</template>
<template v-slot:footer>
<button>OK</button>
</template>
</Card>La scorciatoia #
v-slot: ha una scorciatoia: #. Quindi v-slot:header diventa #header. Questa è la forma idiomatica e concisa.
<Card>
<template #header>
<h2>Title</h2>
</template>
</Card>Contenuto predefinito tra i tag
Il contenuto inserito direttamente tra i tag del componente, non all'interno di un template con nome, viene assegnato allo slot predefinito. È possibile indirizzarlo esplicitamente anche con #default.
<Card>
<p>Implicit default slot content</p>
<template #footer>Footer</template>
</Card>Combinare uso implicito ed esplicito
Può inserire liberamente il contenuto predefinito e definire gli slot con nome tramite template nella stessa dichiarazione. Vue indirizza ogni parte al punto corretto in base al nome.
<Card>
<template #header><h2>Header</h2></template>
Body text right here
<template #footer>Footer</template>
</Card>Ordine di visualizzazione
L'ordine degli slot nel componente padre non è importante: è il template del componente figlio a controllare il layout finale. Il contenuto dello slot viene sempre visualizzato nel punto in cui il componente figlio ha inserito il relativo <slot>.
Un componente di layout pratico
Gli slot con nome consentono di creare strutture di layout riutilizzabili. Un unico <BaseLayout> può ospitare qualsiasi pagina accettando slot per l'intestazione, la barra laterale e il contenuto principale.
<!-- BaseLayout.vue -->
<header><slot name="header" /></header>
<aside><slot name="sidebar" /></aside>
<main><slot /></main>Verifica rapida
Qual è la scorciatoia per v-slot:header?
Riepilogo
Ha imparato che gli slot distribuiscono il markup del componente padre in quello figlio. Un <slot> senza nome è lo slot predefinito; aggiungendo name si creano slot con nome. Il componente padre li riempie con <template v-slot:name> o con la scorciatoia #name, mentre il template del componente figlio stabilisce la posizione finale.
Domande Frequenti
La lezione «Slot con nome e slot predefinito» è gratuita?
Sì — il testo completo di «Slot con nome e slot predefinito» è 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 nome e slot predefinito»?
Più , , sintassi abbreviata #name 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 1 di 4.
Quanto tempo richiede la lezione «Slot con nome e slot predefinito»?
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