Yksisuuntainen tietovirta Vue:ssa
Kaikki propsit muodostavat yksisuuntaisen sidoksen lapsikomponentin ominaisuuden ja vanhemman välillä: kun vanhemman ominaisuus päivitetään, se välitetään lapselle, mutta ei päinvastoin. Tämä estää lasten komponenttien vahingollisen muuttamisen vanhemman tilaa, mikä voi vaikeuttaa sovelluksesi tietovirran ymmärtämistä.
Lisäksi aina kun vanhempakomponentti päivitetään, kaikki lapsikomponenttin propsit päivitetään ajantasaisilla arvoilla. Tämä tarkoittaa, että sinun ei pitäisi yrittää muuttaa proppsia lapsikomponentin sisällä. Jos teet niin, Vue näyttää varoituksen konsolissa.
On kaksi yleistä tapausta, joissa on houkutus muuttaa proppseja. Katsotaanpa niitä.
Ensimmäinen tapaus
Proppsiä käytetään alkuarvon välittämiseen; lapsikomponentti haluaa käyttää sitä paikallisena tieto-ominaisuutena myöhemmin. Tässä tapauksessa on parasta määritellä paikallinen tieto-ominaisuus, joka käyttää propsin arvoa alkuna:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Toinen tapaus
Proppsi välitetään raakana arvona, joka on muunnettava. Tässä tapauksessa on parasta määritellä laskettu ominaisuus käyttämällä proppsia:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Huomio
Huomaa, että JavaScriptin objektit ja taulukot välitetään viitteinä, joten jos proppsi on taulukko tai objekti, niin muutokset lapsikomponentin sisällä tässä objektissa tai taulukossa vaikuttavat vanhemman tilaan, eikä Vue kykene varoittamaan tästä. Kaikkien propsien mutaatioita tulisi välttää, mukaan lukien objektien ja taulukoiden, koska yksisuuntaisen tietosidonnaisuuden unohtaminen voi johtaa haluttuihin tuloksiin.
