Comprendere il Contesto nella Composition API di Vue
articolo nuovo

La Composition API di Vue.js ha introdotto un modo innovativo per organizzare la logica dei componenti. Tra le sue funzionalità chiave troviamo il contesto, un argomento opzionale nella funzione setup che fornisce accesso a elementi essenziali come attributi, slot e metodi per emettere eventi. Questa guida esplora il contesto, fornendo esempi pratici e dettagli su come usarlo per migliorare la gestione dei componenti.
Concetti Fondamentali
Composition API
La Composition API consente di organizzare la logica dei componenti in modo modulare, separando meglio i dati, i metodi e il flusso della logica. Questo approccio supera alcune limitazioni della Options API.
Funzione setup
La funzione setup è il cuore della Composition API. Essa viene eseguita prima che il componente venga creato, consentendo di definire stati reattivi, proprietà calcolate e metodi.
Il Contesto nella setup
Oltre ai props, la funzione setup accetta un oggetto context che include:
• attrs: Attributi non definiti come props (es. classi CSS aggiuntive).
• slots: Funzioni di rendering per gli slot.
• emit: Metodo per emettere eventi dal componente.
Come Utilizzare il Contesto
Accesso ai props e al Contesto
I props e il contesto vengono passati direttamente alla setup. Esempio base:
setup(props, context) {
// Accesso ai props
console.log(props);
// Accesso agli attributi
console.log(context.attrs);
}
1. Gestione degli Attributi Non-Prop
Gli attributi che non corrispondono a props vengono inclusi in context.attrs. Questo è utile per gestire attributi dinamici senza doverli definire esplicitamente.
Esempio: Propagare Attributi Dinamici
<template>
<BaseButton type="submit" class="btn-primary" />
</template>
<script>
export default {
props: ['type'],
setup(props, context) {
return () => (
<button {...context.attrs}>{context.slots.default()}</button>
);
},
};
</script>
Risultato: Gli attributi come class e type vengono applicati direttamente al <button>.
2. Utilizzo degli Slot
Gli slot possono essere richiamati direttamente tramite context.slots.
Esempio: Slot con Contenuto Dinamico
<template>
<Card>
<h1 slot="header">Titolo</h1>
<p slot="body">Contenuto principale.</p>
</Card>
</template>
<script>
export default {
setup(props, context) {
return () => (
<div class="card">
<header>{context.slots.header()}</header>
<section>{context.slots.body()}</section>
</div>
);
},
};
</script>
3. Emissione di Eventi
Per emettere eventi dal componente, utilizza context.emit. Esempio: Emissione di un Evento Personalizzato
<template>
<button @click="submitForm">Invia</button>
</template>
<script>
export default {
setup(props, context) {
const submitForm = () => {
context.emit('submit', { data: 'Esempio di dati' });
};
return { submitForm };
},
};
</script>
Risultato: L’evento submit verrà emesso con i dati passati.
🧐 Esempi Completi
1. Modifica Dinamica degli Attributi
<template>
<DynamicInput placeholder="Inserisci testo" data-info="info extra" />
</template>
<script>
export default {
setup(props, context) {
return () => (
<input {...context.attrs} />
);
},
};
</script>
2. Slot Annidati
<template>
<List>
<template #item="{ item }">
<li>{{ item.name }}</li>
</template>
</List>
</template>
<script>
export default {
props: ['items'],
setup(props, context) {
return () => (
<ul>
{props.items.map(item => context.slots.item({ item }))}
</ul>
);
},
};
</script>
❓ Domande Frequenti
Domanda: Posso usare il Contesto nella Options API?
No, il contesto è specifico della setup nella Composition API.
Domanda: È possibile utilizzare attrs in modo reattivo?
No, attrs non è reattivo. Usa onUpdated per reagire ai cambiamenti.
Domanda: Perché preferire context.emit a this.$emit?
context.emit è più esplicito e si adatta meglio alla natura funzionale della Composition API
Il contesto nella Composition API di Vue fornisce un controllo granulare su attributi, slot ed eventi, semplificando la gestione dei componenti complessi. Con questa guida, hai ora gli strumenti per sfruttare al meglio questa funzionalità. Prova questi esempi nei tuoi progetti e scopri come il contesto può migliorare il tuo sviluppo.
Ricevi le ultime novità
Circa l'autore

Salve il mio nome come avrete notato e Giueppe Alessandro De Blasio e questo è il mio blog, tutto nasce dalla passione per la tecnologia e per il web in generale, ed oggi lo utilizzo come mezzo di condivisione. Spero che la vostra permanenza sul mio blog vi sia utile e che decidiate di diventare miei affezionati lettori.