Enveis datastrøm i Vue
Alle props danner en enveisbinding mellom barneegenskapen og foreldreegenskapen: når foreldreegenskapen oppdateres, vil den overføres til barnet, men ikke omvendt. Dette forhindrer utilsiktede endringer av foreldretilstanden fra barnekomponenter, noe som kan gjøre det vanskelig å forstå datastrømmen i applikasjonen din.
Videre, hver gang foreldrekomponenten oppdateres, vil alle props i barnekomponenten blitt oppdatert med de nyeste verdiene. Dette betyr at du ikke skal forsøke å endre en prop inni en barnekomponent. Hvis du gjør det, vil Vue vise en advarsel i konsollen.
Det er vanligvis to tilfeller hvor man kan fristes til å endre en prop. La oss se på dem.
Første tilfelle
Prop'en brukes til å sende en initialverdi; barnekomponenten ønsker å bruke den som en lokal dataegenskap senere. I dette tilfellet er det best å definere en lokal dataegenskap som bruker prop-verdien som startverdi:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Andre tilfelle
Prop'en sendes som en rå verdi som må transformeres. I dette tilfellet er det best å definere en beregnet egenskap som bruker prop'en:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Merknad
Vær oppmerksom på at objekter og arrays i JavaScript overføres ved referanse, så hvis en prop er en array eller et objekt, vil endringer inni barnekomponenten av dette objektet eller arrayen påvirke tilstanden til forelderen, og Vue er ikke i stand til å advare mot dette. Man bør unngå alle mutasjoner av props, inkludert objekter og arrays, ettersom å ignorere enveis databinding kan føre til uønskede resultater.
