Hinweise zu den Formularkomponenten des Elements

Elementform und Codeanzeige

Weitere Einzelheiten finden Sie auf der offiziellen Website von Element Form.

Struktur- und Funktionsanalyse

Anhand der Einführung und des Quellcodes können wir feststellen, dass das Formular drei Funktionen hat: Sammeln, Überprüfen und Senden von Daten .

Der Grundaufbau ist wie folgt:

<el-form :model="ruleForm" :rules="Regeln" ref="ruleForm">
 <el-form-item label="Konto" prop="Name">
 <el-input v-model="ruleForm.name"></el-input>
 </el-form-item>
</el-form>

Die Eigenschaften allgemeiner Komponenten sind: Hohe Kohäsion und geringe Kopplung . Gemäß dieser Eigenschaft sollten die Komponenten, die wir schreiben möchten, ein Modul sein, das für eine Funktion verantwortlich ist ( Einzelfunktion, Verbesserung der Wiederverwendbarkeit ), während gleichzeitig die nachteiligen Auswirkungen von Interaktionen zwischen ihnen verringert werden.

Analysieren Sie die Grundstruktur des obigen Quellcodes:

form : :model und :rules werden verwendet, um Datenmodelle bzw. Validierungsregeln zu akzeptieren und werden mit dem ref-Attribut registriert, um nachfolgende DOM-Operationen zu erleichtern

item: Holen Sie sich den Wert der aktuellen Daten über prop

Eingabe: Zweiwege-Bindungsverwaltungsdaten

Dann können wir wissen, dass ihre jeweiligen Funktionen darin bestehen, Daten zu sammeln, zu überprüfen und zu übermitteln

Dann verwenden wir unsere häufigsten Anmelde- und Registrierungsfunktionen, um den Code von klein nach groß zu schreiben

Implementierung der Eingabekomponente

Klären Sie zunächst das Ziel: Die Eingabekomponente muss nur eine bidirektionale Bindung implementieren und die Rolle der Datenverwaltung spielen

Die Implementierung der bidirektionalen Bindung erfordert die Verwendung des V-Modells. Im vorherigen Lernprozess kann die Syntax des V-Modells tatsächlich in v-bing:value und v-on:input aufgeteilt werden, die beim Binden von Daten gleichzeitig auf Ereignisse hören können.

Fügen Sie zur einfachen Aufzeichnung unten einige Code-Screenshots ein:

Übergeordnete Komponente:

Unterkomponenten:

Klären Sie zunächst die Funktionen, die Input implementieren muss: Datenpflege durch bidirektionale Bindung

Dann müssen Sie nur noch verstehen, was der bidirektionale Bindungswert und die überwachten Ereignisse sind.

Um die Datenverwaltung zu erleichtern, sollte der in der Eingabeunterkomponente gebundene Wert der von der übergeordneten Komponente übergebene Wert sein.

Es ist zu beachten, dass es sich beim Eingabeereignis der untergeordneten Komponente im Allgemeinen um einen unidirektionalen Datenfluss handelt. Wenn sich die Daten ändern, müssen Sie also nur ein Ereignis an die übergeordnete Komponente ableiten und dann die Daten ändern, indem Sie auf den von der übergeordneten Komponente übergebenen Wert hören. Dadurch wird ein unidirektionaler Zyklus von übergeordnetem zu untergeordnetem und von untergeordnetem zu übergeordnetem Element realisiert.

Implementierung der Artikelkomponente

Übergeordnete Komponente:

Unterkomponenten:

Die Funktionen, die die Artikel-Unterkomponente erfüllen muss, sind: Überprüfung

Lassen Sie uns zuerst eine Vorlage schreiben und dann später die Verifizierungsfunktion verbessern.

Implementierung der Formularkomponente

Übergeordnete Komponente:

Unterkomponenten:

Vom Formular implementierte Funktionen: Empfangen von Daten und Überprüfungsregeln

Sie müssen also diese beiden Eigenschaften deklarieren, um den Empfang zu erleichtern

Das Grundgerüst steht, nun geht es um die Kernfrage

Kernthemen

① Die Daten und Regeln werden im Formular empfangen, aber der Ort, an dem sie benötigt werden, befindet sich im Artikel. Wie geben wir also den Wert weiter => bereitstellen und einfügen?

Obwohl es sich bei den Werten, die wir derzeit verwenden, nur um Informationen und Regeln handelt, übergeben wir der Einfachheit halber diesen Wert, damit wir ihn in Zukunft verwenden können, um das übergeordnete Element und höherstufige Instanzen im untergeordneten Element abzurufen.

Fügen Sie „provide“ zur Formularkomponente hinzu

Fügen Sie „Inject“ zu anderen Komponenten hinzu, die Daten benötigen

Beispiel:

②Überprüfung melden und Überprüfung durchführen

Senden Sie in der Eingabekomponente ein Ereignis an das übergeordnete Element, um es zur Überprüfung aufzufordern

Dieses Ereignis im Artikel empfangen und umsetzen

Bei der Validierungsmethode müssen wir zunächst die Validierungsregeln und die zu validierenden Werte abrufen. Wir haben die Werte bereits über provide und inject weitergegeben. Indem wir dem Element nun ein Prop hinzufügen, können wir den gewünschten Wert über die Prop -Positionierung abrufen.

Als nächstes installieren wir eine Drittanbieterbibliothek npm i async-validator -S (die viele asynchrone Validierungsregeln ausführen kann)

Verwendung des asynchronen Validators

Dann führen Sie es in Punkt

An diesem Punkt ist es im Grunde abgeschlossen. Zur besseren Verwendung gibt es normalerweise eine Schaltfläche zum Senden, auf die zur globalen Überprüfung geklickt wird.

Submit-Funktion

Übergeordnete Komponente:

Formular-Unterkomponente:

Das ist das Ende davon. Vielen Dank fürs Zuschauen. Ich bin noch ein Neuling. Wenn Sie etwas falsch finden, geben Sie mir bitte Ihre wertvollen Vorschläge und korrigieren Sie mich sofort. Vielen Dank.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Elementformularkomponente. Weitere relevante Inhalte zur Elementformularkomponente finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!