Egyirányú adatfolyam a Vue-ban
Minden bemeneti paraméter egyirányú kötést hoz létre a gyermek és a szülő tulajdonsága között: amikor a szülő tulajdonsága frissül, az továbbítódik a gyermekkomponensnek, de fordítva nem. Ez megakadályozza, hogy a gyermekkomponensek véletlenül megváltoztassák a szülő állapotát, ami megnehezítheti alkalmazásod adatfolyamának megértését.
Ezenkívül minden alkalommal, amikor a szülőkomponens frissül, a gyermekkomponens összes bemeneti paramétere a legfrissebb értékekre lesz frissítve. Ez azt jelenti, hogy nem szabad megpróbálnod módosítani a bemeneti paramétert a gyermekkomponensen belül. Ha ezt teszed, a Vue egy figyelmeztetést jelenít meg a konzolon.
Általában két eset fordul elő, amikor a kísértés felmerül a bemeneti paraméter megváltoztatására. Nézzük meg ezeket.
Első eset
A bemeneti paramétert kezdeti érték továbbítására használják; a gyermekkomponens később helyi adattulajdonságként szeretné használni. Ebben az esetben a legjobb egy helyi tulajdonságot definiálni az adatokban, amely a bemeneti paraméter értékét használja kezdeti értékként:
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Második eset
A bemeneti paraméter feldolgozatlan értékként van továbbítva, amelyet át kell alakítani. Ebben az esetben a legjobb egy számított tulajdonságot definiálni a bemeneti paraméter felhasználásával:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Megjegyzés
Vegye figyelembe, hogy a JavaScript objektumok és tömbjek referenciával adódnak tovább, tehát ha a bemeneti paraméter tömb vagy objektum, akkor a gyermekkomponensen belüli változtatások kihatnak a szülő állapotára, és a Vue nem képes erről figyelmeztetni. Kerülni kell a bemeneti paraméterek bármilyen mutálását, beleértve az objektumokat és tömbjeket is, mivel az egyirányú adatkötés figyelmen kívül hagyása nemkívánatos eredményekhez vezethet.
