Comprendere il Contesto nella Composition API di Vue

Scopri come sfruttare al meglio il contesto nella Composition API di Vue per gestire componenti complessi con semplicità
Tempo lettura: 3 minuti, 17 secondi
Difficoltà: Principiante
Nuovo:
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à

Condividi:

Circa l'autore

Giuseppe Alessandro De Blasio

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.

Commenti