Ühesuunaline andmevoog Vue's
Kõik sisendparameetrid moodustavad ühesuunalise seose lapse omaduse ja vanema omaduse vahel: kui vanema omadust uuendatakse, edastatakse see lapsele, kuid mitte vastupidi. See takistab juhuslikku muutmist, kus lapsekomponendid muudaksid vanema olekut, mis võib muuta teie rakenduse andmevoost arusaamise raskemaks.
Lisaks, iga kord, kui vanemakomponent uuendatakse, uuendatakse kõik lapsekomponendi sisendparameetrid koos uusimate väärtustega. See tähendab, et te ei peaks proovima muuta sisendparameetrit lapsekomponendi sees. Kui te seda teete, kuvab Vue konsoolis hoiutuse.
Tavaliselt esineb kaks juhtumit, kus tekib kiusatus muuta sisendparameetrit. Vaatame neid.
Esimene juhtum
Sisendparameetrit kasutatakse algväärtuse edastamiseks; lapsekomponent soovib seda hiljem kasutada kui kohalikku andmeomadust. Sellisel juhul on kõige parem defineerida kohalik andmeomadus, mis kasutab sisendparameetri väärtust algväärtusena:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Teine juhtum
Sisendparameeter edastatakse toore väärtusena, mida on vaja teisendada. Sellisel juhul on kõige parem defineerida arvutatud omadus, kasutades sisendparameetrit:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Märkus
Pange tähele, et objektid ja massiivid JavaScriptis edastatakse viidete kaudu, seega kui sisendparameeter on massiiv või objekt, siis muutused lapsekomponendi sees selles objektis või massiivis mõjutavad vanema olekut ja Vue ei ole võimeline sellest hoiatama. Tuleks vältida igasuguseid sisendparameetrite mutatsioone, sealhulgas objektide ja massiivide omasid, kuna ignoreerimine ühesuunalist andmesidemest võib viia soovimatute tulemusteni.
