props in Vue 3

In questa lezione affronteremo le props in Vue 3 integrando la sintassi della Composition API.

Ricordiamo che le props sono un meccanismo fondamentale per passare dati da un componente genitore a uno figlio.

Come gestire le props in Vue 3 e le Composition API?

Con Vue 3, le props mantengono la loro flessibilità e immutabilità, garantendo che i dati passati da un componente genitore non possano essere modificati dal componente figlio, promuovendo così una migliore gestione dei dati e una maggiore prevedibilità nel comportamento dell’applicazione.

Una delle caratteristiche distintive delle props in Vue 3 è la loro natura reattiva. Ciò significa che se una prop cambia nel componente genitore, il cambiamento sarà riflesso automaticamente nel componente figlio senza la necessità di aggiornamenti manuali. Questo approccio semplifica notevolmente lo sviluppo e migliora l’efficienza, poiché i componenti possono reagire dinamicamente ai cambiamenti dei dati.

Inoltre, Vue 3 offre un’esperienza di sviluppo più intuitiva e potente per la gestione delle props. L’introduzione del Composition API consente di definire le props in modo più chiaro e conciso, migliorando la leggibilità e la manutenibilità del codice.

Banner Pubblicitario

Esplora l’universo infinito della programmazione con ’50 Algoritmi per imparare JavaScript’, il libro che trasformerà la tua passione per il codice in realtà digitale!

Acquistalo su Amazon

Esempio props in Vue 3 e la sintassi Composition API

Creiamo un componte padre che passa una semplice variabile al figlio, seguendo la sintassi della Composition API:

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  setup() {
    const parentMessage = ref('Ciao da tuo padre');
    
    return {
      parentMessage
    };
  }
};
</script>

Nel componente figlio ChildComponent, utilizziamo defineComponent per definire il componente. Definiamo poi una prop chiamata message di tipo stringa, che è richiesta. Se non viene fornita, verrà generato un avviso.

<template>
    <div>
      <h2>{{ message }}</h2>

    </div>
  </template>
  
  <script>
  
  export default {
    name: 'ChildComponent',
    props: ['message'],
    setup(props) {
      return { message: props.message }; 
     // Restituiamo la prop come variabile locale "message"
    }
  };
  </script>

Dunque con la Composition API, introdotta in Vue 3, si ha un approccio alternativo alla strutturazione del codice del componente. Invece di organizzare il codice in base alle opzioni, la Composition API consente di utilizzare funzioni singole (setup) per definire il comportamento e i dati del componente. Questo approccio favorisce una maggiore modularità e riusabilità del codice, consentendo di raggruppare logicamente il codice in base alla funzionalità anziché alla sua natura (ad esempio, dati, metodi, ecc.).

Nel nostro esempio, la prop message viene dichiarata come di tipo stringa, ed è obbligatoria, ciò significa che se non viene specificata il componente sarà un avviso. Se non impostiamo required: false (o non lo inseriamo come proprietà) il componente funzionerà comunque senza generare avvisi. Quest’ultima opzione è utile quando una prop può essere opzionale.

Banner pubblicitario

Esempio props in Vue 3 – passare array

Possiamo passare anche un array con le Composition API. Realizziamo dunque il componente padre dove impostiamo una array di nomi. Nel blocco <script>, importiamo la funzione ref dalla Composition API. Stiamo anche importando il componente figlio ChildComponent. All’interno della funzione setup(), creiamo una variabile reattiva nameList utilizzando la funzione ref(). Questa variabile contiene un array di nomi.

Infine, restituiamo l’array nameList in modo che possa essere utilizzato nel template come una proprietà reattiva. Quando il valore di nameList cambia, il componente verrà aggiornato automaticamente per riflettere questi cambiamenti.

Ecco come si presenta dunque il componente padre:

<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent :names="nameList" />
  </div>
</template>

<script>
import { ref } from 'vue'; // Importiamo ref dalla Composition API
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  setup() {
    const nameList = ref(['Paperino', 'Pippo', 'Paperina', 'Pluto']); 
    // Definiamo una ref per l'array di nomi

    return {
      nameList
    };
  }
};
</script>

Realizziamo poi il componente figlio. Nel blocco <script>, definiamo il componente Vue dove inseriamo le props: ['names']. In pratica definiamo names come una prop che il componente riceve dal suo genitore.

Poi realizziamo il blocco della Composition API con setup(props) dove definiamo lo stato reattivo e altre logiche del componente. In questo caso, riceviamo le props come argomento e restituiamo un oggetto che contiene names come variabile locale (possiamo chiaramente restituire più elementi). Questo ci consente di utilizzare names all’interno del template del componente come una variabile locale, rendendola disponibile per la visualizzazione nella lista per il nostro esempio.

Quindi, questo componente figlio ChildComponent riceve un array di nomi come prop dal suo componente genitore e lo visualizza in una lista non ordinata nel template. Utilizzando la Composition API, possiamo gestire le props e altri aspetti del componente in modo più dichiarativo e organizzato.

Ecco come potremmo dunque sviluppare il componente figlio:

<template>
    <div>
      <h2>Child Component</h2>
      <ul>
        <li v-for="name in names" :key="name">{{ name }}</li>
      </ul>
    </div>
  </template>
  
  <script>
  
  export default {
    name: 'ChildComponent',
    props: ['names'],
    setup(props) {
      return { names: props.names }; 
      // Restituiamo lae prop come variabile locale "names"
    }
  };
  </script>

Esplora l’universo infinito della programmazione con ’50 Algoritmi per imparare JavaScript’, il libro che trasformerà la tua passione per il codice in realtà digitale!

Acquistalo su Amazon

Esempio props in Vue 3 – passare un oggetto

In questo esempio nel componente genitore ParentComponent, passiamo due props al componente figlio ChildComponent: message e data.

Queste props vengono passate tramite la sintassi :message="parentMessage" e :data="parentData" inserita nel “tag” che rappresenta il componente figlio nella sezione template.

Poi nello script importiamo il componente figlio ChildComponent dalla sua posizione nel progetto. Dopo definiamo il componente genitore con il nome ParentComponent e utilizziamo la Composition API per definire le variabili reactive parentMessage e parentData. Queste variabili rappresentano il messaggio e i dati che vogliamo passare al componente figlio. Infine restituiamo parentMessage e parentData dalla funzione setup(). Questo ci consente di renderle disponibili nel template del componente.

Ecco come si presenta dunque il componente padre:

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent :message="parentMessage" :data="parentData" />
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './components/ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  setup() {
    const parentMessage = ref('Ciao da tuo padre');
    const parentData = ref({
      name: 'Paperina',
      age: 25,
      email: 'paperina@example.com'
    });

    return { parentMessage, parentData };
  }
};
</script>

Realizziamo poi il componente figlio e Nnel blocco props, dichiariamo le props che il componente figlio riceve dal componente genitore. In questo caso, message è una stringa e data è un oggetto. Nel template, stiamo accedendo alle props message e data utilizzando la sintassi di Vue {{ message }} e {{ data }}. Utilizziamo anche una direttiva v-for per iterare attraverso le chiavi e i valori dell’oggetto data e visualizzarli come elenco nel template.

Ecco come si presenta il componente figlio:

<!-- ChildComponent.vue -->
<template>
    <div>
      <h2>Child Component</h2>
      <p>{{ message }}</p>
      <p>Studentessa:</p>
      <ul>
        <li v-for="(value, key) in data" :key="key">{{ key }}: {{ value }}</li>
      </ul>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ChildComponent',
    props: {
      message: String,
      data: Object
    }
  };
  </script>

Conclusioni

In conclusione, le props in Vue 3 sono un pilastro fondamentale per la comunicazione tra i componenti, offrendo una soluzione robusta, reattiva e intuitiva per passare dati all’interno dell’applicazione. La loro natura immutabile, combinata con le funzionalità avanzate del Composition API, rende Vue 3 un framework potente e versatile per lo sviluppo di applicazioni moderne e scalabili.

>> props con Option API

emit >>