Die Verwendung des V-Modells in Vue3-Komponenten und ausführliche Erklärung

Verwenden Sie bidirektionale Bindungsdaten in der V-Modell-Eingabe

In Vue verwenden wir häufig v-model, um den Eingabewert des Eingabefelds zu binden. Jeder sollte das einfache Implementierungsprinzip kennen, bei dem der Wert über v-bind gebunden wird und der gebundene Wert in Kombination mit dem Eingabeereignis @input dynamisch geändert wird, um eine bidirektionale Bindung zu erreichen. Im Folgenden finden Sie den Implementierungscode von Vue3:

<Vorlage>
   <input type="text" :value="tryText" @input="handelInput">
   <h2>{{tryText}}</h2>
</Vorlage>

<Skript>
importiere { ref} von "vue"
    Standard exportieren {
        aufstellen(){
            let tryText = ref("Standardeingabewert")
            Funktion handelInput(e) {
                tryText.value = e.target.value; //Der durch ref definierte Datenzugriff und die Datenänderung müssen über .value erfolgen.
            }
            zurückkehren {
                versucheText,
                handelInput
            }
        }
    }
</Skript>

Ich glaube, jeder verwendet häufig das V-Modell in ipnut. Sehen wir uns nun an, wie das V-Modell in Komponenten verwendet wird und welche Rolle es spielt.

V-Modell in Komponenten

Wie verwende ich das V-Modell in Komponenten? Lasst uns einfach implementieren

Übergeordnete Komponente

<Vorlage>
  <!-- Komponentenbindung v-model -->
  <hy-input v-model="Nachricht"></hy-input>
  <h2>{{Nachricht}}</h2>
</Vorlage>

<Skript>
importiere { ref } von '@vue/reactivity'
HyInput aus "../components/HyInput.vue" importieren
Standard exportieren {
  Komponenten: {HyInput },
    aufstellen(){
        let message = ref("Übernehmen Sie die Anweisung(*^ｰ^)(^ｰ^*)")
        zurückkehren {
            Nachricht,
        }
    }
}
</Skript>

Unterkomponenten

<Vorlage>
   <button @click="handelClick">O(∩_∩)O Haha~</button>
   <br>
</Vorlage>

<Skript>
    Standard exportieren {
        Requisiten:{
            Modellwert:String,
        },
        gibt aus:['update:modelValue'],
        Setup (Requisiten, Kontext) {
            Funktion handelClick() {
                Kontext.emit("update:Modellwert","O(∩_∩)O-Wert~")
            }
        
            zurückkehren {
                handelClick,
            }
        }
    }
</Skript>

Angesichts dessen kommen uns vielleicht Zweifel, warum wir Veranstaltungen starten müssen? Warum gibt es einen Standard-Empfangswert für Requisiten? Keine Sorge, wir werden es anhand des Implementierungsprinzips verstehen.

Auf diese Weise können wir die Nachrichtendaten in der übergeordneten Komponente ändern, indem wir auf die Schaltfläche der untergeordneten Komponente klicken. Dies ist eine einfache Implementierung des bidirektionalen Datenbindungs-V-Modells in einer Komponente.

Da es sich um eine bidirektionale Bindung handelt, wollen wir mal mutig raten, ob sie dem Implementierungsprinzip bei der Eingabe ähnelt? Schauen wir uns an, wie es funktioniert.

Übergeordnete Komponente

<Vorlage>
  <!-- Prinzip -->
  <hy-input :modelValue="Nachricht" @update:modelValue="Nachricht = $event"></hy-input>
  <h2>{{Nachricht}}</h2>
</Vorlage>

<Skript>
importiere { ref } von '@vue/reactivity'
HyInput aus "../components/HyInput.vue" importieren
Standard exportieren {
  Komponenten: {HyInput },
    aufstellen(){
        let message = ref("Übernehmen Sie die Anweisung(*^ｰ^)(^ｰ^*)")
        zurückkehren {
            Nachricht,
        }
    }
}
</Skript>

Die Unterkomponente bleibt unverändert

<Vorlage>
   <button @click="handelClick">O(∩_∩)O Haha~</button>
   <br>
</Vorlage>

<Skript>
    Standard exportieren {
        Requisiten:{
            Modellwert:String,
        },
        gibt aus:['update:modelValue'],
        Setup (Requisiten, Kontext) {
            Funktion handelClick() {
                Kontext.emit("update:Modellwert","O(∩_∩)O-Wert~")
            }
        
            zurückkehren {
                handelClick,
            }
        }
    }
</Skript>

Die Ergebnisse zeigen, dass es tatsächlich möglich ist

Auf diese Weise können wir die Emissionsereignisse und die standardmäßig empfangenen Werte in untergeordneten Komponenten verstehen. Das grundlegende Implementierungsprinzip lautet: Die übergeordnete Komponente übergibt Werte an die untergeordnete Komponente, und die untergeordnete Komponente empfängt sie über Requisiten. Wenn die Daten jedoch in der untergeordneten Komponente geändert werden müssen, teilen wir dies der übergeordneten Komponente durch Ausgeben eines Ereignisses mit, und dann empfängt die übergeordnete Komponente den übergebenen Wert und ändert ihn. Tatsächlich handelt es sich um die Kommunikation zwischen übergeordneten und untergeordneten Komponenten, aber Vue hilft uns bei der einfachen Kapselung.

ps: Standardmäßig müssen die an v-model gebundenen Daten in der Unterkomponente mit modelValue gelesen werden, um das Emissionsereignis zu empfangen. Der Standardname lautet update:modelValue. Wenn Sie mehrere Werte binden oder einen benutzerdefinierten Namen verwenden möchten, beachten Sie bitte die anderen Schreibmethoden unten.

PS: Sie können die Daten nicht ändern, indem Sie Requisiten ändern. Erstens ist dies eine besonders schlechte Entwicklungsgewohnheit. Dann wissen wir, dass die Eigenschaften von Requisiten nur für die Datenübertragung verantwortlich sind. Durch Ändern von Requisiten kann nicht der gewünschte Effekt erzielt werden. Wir sollten die übergeordnete Komponente benachrichtigen, um die Daten zu aktualisieren. Dies ist die beste Vorgehensweise.

Andere Möglichkeiten zu schreiben

Wie können wir eine bidirektionale Bindung zwischen der Eingabe in unserer untergeordneten Komponente und der übergeordneten Komponente implementieren? Und was ist, wenn Sie mehrere bidirektionale Bindungsdaten übergeben müssen? Was ist mit benutzerdefinierten Namen?
Übergeordnete Komponente

<Vorlage>
  <!-- Komponentenbindung v-model -->
  <hy-input v-model="Nachricht" v-model:text="inputText"></hy-input>
  <h2>{{Nachricht}}</h2>
  <h2>{{inputText}}</h2>
</Vorlage>

<Skript>
importiere { ref } von '@vue/reactivity'
HyInput aus "../components/HyInput.vue" importieren
Standard exportieren {
  Komponenten: {HyInput },
    aufstellen(){
        let message = ref("Übernehmen Sie die Anweisung(*^ｰ^)(^ｰ^*)")
        let inputText = ref("Eingabeaufforderung")
  
        zurückkehren {
            Nachricht,
            Eingabetext
        }
    }
}
</Skript>

Unterkomponenten

<Vorlage>
   <button @click="handelClick">O(∩_∩)O Haha~</button>
   <br>
   <Eingabetyp="Text" v-Modell="benutzerdefinierterText">
   <br>
</Vorlage>

<Skript>
importiere {berechnet} aus "vue"
    Standard exportieren {
        Requisiten:{
            Modellwert:String,
            Text:Zeichenfolge
        },
        gibt aus: ['update:modelValue',"update:text"],
        Setup (Requisiten, Kontext) {
            Funktion handelClick() {
                Kontext.emit("update:Modellwert","O(∩_∩)O-Wert~")
            }
            let customText = berechnet({
                setze(Wert){
                    Kontext.emit("Update:Text",Wert)
                },
                erhalten(){
                    Requisiten.Text zurückgeben
                }
            })

            zurückkehren {
                handelClick,
                benutzerdefinierter Text,
            }
        }
    }
</Skript>

Mehrere Bindungswerte und Umbenennung v-model:text="inputText" Die Requisiten in der Unterkomponente sind direkt Text. Der Name des Emissionsereignisses lautet update:text
Hier sehen wir, dass wir, um die bidirektionale Bindung des Eingabefeld-V-Modells in der untergeordneten Komponente an die übergeordnete Komponente zu realisieren, die berechnete Eigenschaft verwenden müssen, um dies zu erreichen. Einige Schüler möchten den Text möglicherweise direkt in Requisiten binden, oder? Wie oben erwähnt, können Sie binden, wenn Sie nur lesen, aber wenn Sie es ändern, müssen Sie die übergeordnete Komponente benachrichtigen, um die Daten durch Ausgeben von Ereignissen zu aktualisieren (Sie können den Wert in den Eigenschaften nicht ändern, Sie können nur lesen!!!). In den berechneten Eigenschaften geben wir also Ereignisse im Set aus, um die Daten der übergeordneten Komponente zu aktualisieren, und beim Lesen lesen wir einfach den Wert in den Eigenschaften direkt.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung und Erklärung des V-Modells in Vue3-Komponenten. Weitere relevante Inhalte zur Verwendung des V-Modells von Vue3-Komponenten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!