Eine kurze Diskussion über Props (unidirektionaler Datenfluss) in vue.js

prop ist eine unidirektionale Bindung: Wenn sich die Eigenschaften der übergeordneten Komponente ändern, werden diese an die untergeordnete Komponente übertragen, jedoch nicht umgekehrt. Dadurch soll verhindert werden, dass untergeordnete Komponenten versehentlich den Status der übergeordneten Komponente ändern – was den Datenfluss der Anwendung schwer verständlich machen würde.

Darüber hinaus werden jedes Mal, wenn die übergeordnete Komponente aktualisiert wird, alle Requisiten der untergeordneten Komponente auf die neuesten Werte aktualisiert. Dies bedeutet, dass Sie Requisiten innerhalb untergeordneter Komponenten nicht ändern sollten. Wenn Sie dies tun, werden Sie von Vue in der Konsole gewarnt.

Normalerweise gibt es zwei Fälle, in denen Props geändert werden:

1. prop wird als Anfangswert übergeben, und die Unterkomponente verwendet einfach ihren Anfangswert als Anfangswert der lokalen Daten;

2. prop wird als Original verwendet Wert, der transformiert werden muss. Der Wert wird übergeben.

Genauer gesagt sind diese beiden Situationen:

1 Definieren Sie ein lokales Datenattribut und verwenden Sie den Anfangswert von prop als Anfangswert der lokalen Daten.

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

2. Definieren Sie eine berechnete Eigenschaft, die aus dem Wert von prop berechnet wird.

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

Beachten Sie, dass Objekte und Arrays Referenztypen in JavaScript sind und auf denselben Speicherbereich verweisen. Wenn prop ein Objekt oder Array ist, wirkt sich eine Änderung innerhalb der untergeordneten Komponente auf den Status der übergeordneten Komponente aus.

Englische Originaladresse: https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

Verwandte Empfehlungen:

Zusammenfassung der Front-End-Vue-Interviewfragen 2020 (mit Antworten)

vue-Tutorial-Empfehlung: Die neuesten 5 vue.js-Video-Tutorial-Auswahlen im Jahr 2020

Weitere Programmierkenntnisse finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über Props (unidirektionaler Datenfluss) in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!