props in Vue.js

Le props (abbreviazione di “properties”) sono una caratteristica di Vue.js che consente la comunicazione unidirezionale dei dati tra componenti genitore e figlio. Difatti le props consentono dunque ai componenti figli di accedere ai dati passati loro dal componente genitore.

Come vengono passati i dati con le props da padre a figlio?

Le props sono passate come attributi HTML personalizzati ai componenti figlio e possono contenere qualsiasi tipo di dato JavaScript, come stringhe, numeri, oggetti o array. Una volta passate, le props diventano proprietà del componente figlio e possono essere utilizzate all’interno del suo template o delle sue funzioni JavaScript. Le props sono immutabili, il che significa che il componente figlio non può modificare direttamente i dati ricevuti attraverso le props. Questo consente una chiara separazione delle responsabilità tra i componenti genitore e figlio e facilita la creazione di componenti riutilizzabili e modulari.

In questa lezione ci concentremo sul passaggio dei dati da un componente padre ad un componente figlio attraverso la sintassi Option API. Nella prossima lezione vedremo come implementare le props con la sintassi Composition API.

Esempio di props in Vue.js – passare una variabile

Facciamo dunque un esempio pratico di come utilizzare le props in un componente Vue.

Creiamo il componente padre che vuole passare un messaggio al figlio.

<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  }
};
</script>

In questo componente genitore (ParentComponent), abbiamo importato il componente figlio (ChildComponent) e lo abbiamo utilizzato nel nostro template. Abbiamo passato una prop chiamata “message” al componente figlio utilizzando la sintassi :message="parentMessage", dove parentMessage è una proprietà definita nei dati del componente genitore. Questo valore viene quindi ricevuto dal componente figlio attraverso la prop “message” e può essere utilizzato all’interno del suo template.

Quindi, quando il componente figlio viene renderizzato all’interno del componente genitore, il testo “Hello from Parent” verrà visualizzato nel componente figlio come parte del messaggio proveniente dal genitore.

Poi creiamo il componente figlio (ChildComponent), dove definiamo una prop chiamata “message“, che arriva dal componente genitore (ParentComponent). All’interno del template del componente figlio, possiamo accedere al valore della prop utilizzando la sintassi di interpolazione {{ message }}.

<template>
  <div>
    <h2>Child Component</h2>
    <p>Message from parent: {{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: ['message'], // Definiamo una prop chiamata "message"
};
</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 di props in Vue.js – passare un array

Creiamo il componente padre (ParentComponent), dove importiamo il componente figlio (ChildComponent) e lo utilizziamo nel nostro template. Passiamo l’array nameList al componente figlio utilizzando la sintassi :names="nameList". All’interno del componente figlio, questo array sarà accessibile attraverso la prop “names” e verrà visualizzato nell’elenco.

Così, quando il componente figlio viene renderizzato all’interno del componente genitore, visualizzerà l’elenco dei nomi contenuti nell’array.

Ecco come si presenta il componente genitore:

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

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      nameList: ['Paperino', 'Pippo', 'Paperina', 'Pluto'] // Definiamo un array di nomi
    };
  }
};
</script>

Definiamo poi il componente figlio, dove definiamo una prop chiamata “names” per ricevere l’array di nomi dal componente genitore. Utilizziamo poi la direttiva v-for per iterare su ogni nome nell’array e visualizzarlo all’interno di un elenco non ordinato.

Ecco come si presenta 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'], // Definiamo una prop chiamata "names" per ricevere l'array
};
</script>

Esempio di props in Vue.js – passare un oggetto

Passiamo un oggetto dal componente padre al componente figlio. Definiamo un componente genitore (ParentComponent), dove importiamo il componente figlio (ChildComponent) e lo utilizziamo nel nostro template. Passiamo l’oggetto userInfo al componente figlio utilizzando la sintassi :userData="userInfo".

Ecco come si presenta il componente genitore:

<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent :userData="userInfo" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      userInfo: {
        username: 'paperina',
        email: 'paperina@example.com',
        eta: 28

      }
    };
  }
};
</script>

All’interno del componente figlio, l’oggetto userInfo sarà accessibile attraverso la prop “userData” e verranno visualizzate le varie proprietà dell’oggetto dell’utente. All’interno del template del componente figlio, possiamo accedere alle varie proprietà dell’oggetto user come user.username e user.email, ecc.

Così, quando il componente figlio viene renderizzato all’interno del componente genitore, visualizzerà le informazioni dell’utente come username ed email.

<template>
  <div>
    <h2>Child Component</h2>
    <p>Username: {{ user.username }}</p>
    <p>Email: {{ user.email }}</p>
    <p>Eta: {{ user.eta }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: ['userData'], // Definiamo una prop chiamata "userData" per ricevere l'oggetto
};
</script>

Conclusioni

Dunque le props in Vue offrono un meccanismo flessibile per passare dati da un componente genitore a uno figlio. Questo favorisce una migliore organizzazione del codice e una maggiore modularità. Inoltre le props sono immutabili nel componente figlio, il che significa che non possono essere modificate direttamente dal componente figlio. Questo favorisce una migliore comprensione del flusso dei dati e una maggiore prevedibilità nel comportamento dell’applicazione.

Le props possono essere di diversi tipi di dati, come stringhe, numeri, oggetti, array, funzioni, booleani, ecc. Questo permette una grande flessibilità nel passaggio di dati tra i componenti. Vedremo in seguito che Vue.js offre la possibilità di definire regole di validazione per le props, consentendo di specificare il tipo e altre condizioni che devono essere soddisfatte per accettare una prop.

>> Direttiva v-model

props con Composition API >>