Components: one way data flow

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.