Components: one way data flow

17 ottobre 2017

Il motore di Vue implementa il cosiddetto one way data flow come modalità con la quale i componenti comunicano tra di loro. In particolare, questo significa che le prop passate ad un componente possono essere modificate dall’esterno, ma non dal componente stesso, in quanto il flusso di dati è monodirezionale, dall’alto al basso. Se per qualche ragione cercassimo di modificare il valore di una prop all’interno di un componente, Vue lancierà un warning in console. Cerchiamo di approfondire con un esempio:

Vue.component('child-component', {
  props: ['firstname', 'lastname'],
  methods: {
    updateFirstname: function() {
      this.firstname = 'Luigi';
    }
  }
});
new Vue({
  el: '#vue-app',
  data: {
    firstname: 'alberto',
    lastname: 'bottarini'
  }
});
<div id="vue-app"> 
  <b>{{ firstname }} {{ lastname }}</b>
  <child-component inline-template :firstname="firstname" :lastname="lastname"> 
    <button @click="updateFirstname()">Update from child</button> 
  </child-component> 
</div>

In questo esempio abbiamo creato un componente (child-component) che, tramite un bottone, modifica una prop. Eseguendolo, questo snippet produrrà appunto un warning.

Gli sviluppatori di Vue hanno imposto questo comportamento come schermatura per potenziali errori incontrollati, che potrebbero verificarsi implementando un doppio flusso di modifica. Nel caso in cui servisse implementare un componente che applichi una modifica verso l’alto, gli stessi sviluppatori suggeriscono un approccio basato sugli eventi custom. Di questi tratteremo nella prossima lezione.

Tutte le lezioni

1 ... 10 11 12 13

Se vuoi aggiornamenti su Components: one way data flow inserisci la tua e-mail nel box qui sotto:
Tags:
 
X
Se vuoi aggiornamenti su Components: one way data flow

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy