Enriktad dataflöde i Vue
Alla props bildar en enkelriktad bindning mellan den underordnade egenskapen och den överordnade: när den överordnade egenskapen uppdateras kommer den att skickas till den underordnade, men inte tvärtom. Detta förhindrar oavsiktliga ändringar av det överordnade tillståndet av underordnade komponenter, vilket kan göra det svårt att förstå dataflödet i din applikation.
Dessutom, varje gång den överordnade komponenten uppdateras, kommer alla props för den underordnade komponenten att uppdateras med aktuella värden. Detta innebär att du inte bör försöka ändra en prop inuti den underordnade komponenten. Om du gör det kommer Vue att visa en varning i konsolen.
Vanligtvis finns det två fall där frestelsen att ändra en prop uppstår. Låt oss undersöka dem.
Första fallet
Propen används för att skicka ett initialvärde; den underordnade komponenten vill använda det som en lokal dataegenskap framöver. I det här fallet är det bäst att definiera en lokal dataegenskap som använder propens värde som startvärde:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Andra fallet
Propen skickas som ett orått värde som behöver omvandlas. I det här fallet är det bäst att definiera en beräknad egenskap som använder propen:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Anmärkning
Observera att objekt och arrayer i JavaScript skickas som referens, så om propen är en array eller ett objekt, kommer ändringar inuti den underordnade komponenten av det objektet eller arrayen att påverka det överordnade tillståndet och Vue kan inte varna om detta. Man bör undvika alla mutationer av props, inklusive objekt och arrayer, eftersom att ignorera den enkelriktade databindningen kan leda till oönskade resultat.
