Attributbindung
ofa.js unterstützt die Bindung von Daten an die Eigenschaften von Objekten, die nach der Instanziierung von Elementen entstehen, wie z. B. die value- oder checked-Eigenschaft eines input-Elements.
Einweg-Attributbindung
Einweg-Attribut-Bindung verwendet die Syntax :toKey="fromKey", um Komponentendaten „einseitig“ mit dem Attribut eines DOM-Elements zu synchronisieren. Ändert sich die Komponentendatum, wird das Elementattribut sofort aktualisiert; Änderungen am Element selbst (z. B. Benutzereingaben) fließen jedoch nicht zurück in die Komponente und halten den Datenfluss einseitig und steuerbar.
Aktueller Wert: {{val}}
Hinweis: Eine direkte Änderung des Inhalts im Eingabefeld ändert den oben angezeigten Wert nicht
Zweiwege-Attributbindung
Die bidirektionale Eigenschaftsbindung verwendet die sync:xxx-Syntax und realisiert die bidirektionale Synchronisation zwischen Komponentendaten und DOM-Elementen. Wenn sich die Komponentendaten ändern, wird die Eigenschaft des DOM-Elements aktualisiert; wenn sich die Eigenschaft des DOM-Elements ändert (z. B. durch Benutzereingaben), werden auch die Komponentendaten synchronisiert.
Aktueller Wert: {{val}}
Hinweis: Änderungen im Eingabefeld aktualisieren sofort den darüber angezeigten Wert
Merkmale der bidirektionalen Bindung
- Datenfluss: Komponente ↔ DOM-Element (bidirektional)
- Änderung der Komponentendaten → Aktualisierung des DOM-Elements
- Änderung des DOM-Elements → Aktualisierung der Komponentendaten
- Geeignet für Szenarien, die Benutzereingaben und Datensynchronisation erfordern
Zweiseitige Datenbindung von Objekten
Für die Datenbindung bei Objekttypen ist die sync-Syntax nicht erforderlich, verwenden Sie einfach die unidirektionale Übergabe mit :. Dies liegt daran, dass JavaScript-Objekte als Referenz geteilt werden. Wenn die Elternkomponente ein Objekt an die Kindkomponente übergibt, erhält die Kindkomponente eine Referenz auf dasselbe Objekt. Änderungen am Objekt wirken sich direkt auf die ursprünglichen Daten aus.
ofa.js bewahrt diese Eigenschaft von JavaScript, daher entspricht die unidirektionale Übergabe von Objekten tatsächlich der bidirektionalen Übergabe. Zum Beispiel:
<template page>
<child-comp :userData="userInfo"></child-comp>
<script>
export default async () => {
return {
data: { userInfo: { name: "Zhang San", age: 25 } }
};
};
</script>
</template>Im Kind-Komponenten child-comp wird direkt userData.name geändert, und im Eltern-Komponenten wird userInfo.name gleichzeitig aktualisiert, da sie auf dieselbe Objektreferenz verweisen.
Häufige Szenarien für bidirektionale Bindung
Formular-Zwei-Wege-Bindung Beispiel
Echtzeit-Vorschau:
Text: {{textInput}}
Zahl: {{numberInput}}
Mehrzeiliger Text: {{textareaInput}}
Auswahl: {{selectedOption}}
Checkbox-Status: {{isChecked ? 'angekreuzt' : 'nicht angekreuzt'}}
Hinweise
- Leistungsaspekte：Zwei-Wege-Datenbindung erstellt Daten-Listener, eine umfangreiche Nutzung kann die Leistung beeinträchtigen.
- Datenkonsistenz：Zwei-Wege-Datenbindung gewährleistet die Konsistenz von Daten und Ansicht, aber es ist darauf zu achten, Endlosschleifen-Updates zu vermeiden.
- Initialwertsetzung：Stellen Sie sicher, dass die gebundenen Daten geeignete Anfangswerte haben, um Anzeigeprobleme durch undefined zu vermeiden.
- Ereigniskonflikte：Vermeiden Sie die gleichzeitige Verwendung von Zwei-Wege-Datenbindung und manueller Ereignisbehandlung auf demselben Element, um Konflikte zu vermeiden.