- Learn
- Vue.js, la guida
- Components: one way data flow
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.
Se vuoi aggiornamenti su JavaScript inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Massimiliano Pippi
Massimiliano Pippi ci parla di siti “vintage” generati con Python.