Ich fange an, mit vuejs (2.0) zu spielen. Ich habe eine einfache Seite mit einer Komponente erstellt. Die Seite hat eine Vue-Instanz mit Daten. Auf dieser Seite habe ich mich registriert und die Komponente zu HTML hinzugefügt. Die Komponente hat eine input[type=text]
. Ich möchte, dass dieser Wert sich auf das übergeordnete Element (Hauptinstanz von Vue) auswirkt.
Wie aktualisiere ich die übergeordneten Daten der Komponente korrekt? Das Übergeben einer gebundenen Requisite vom Elternteil ist nicht gut und wirft einige Warnungen an die Konsole. Sie haben etwas in ihrem Dokument, aber es funktioniert nicht.
javascript
vue.js
vue-component
Gal Ziv
quelle
quelle
Antworten:
Die bidirektionale Bindung wurde in Vue 2.0 zugunsten der Verwendung einer ereignisgesteuerten Architektur abgelehnt. Im Allgemeinen sollte ein Kind seine Requisiten nicht mutieren. Vielmehr sollte es
$emit
Ereignisse geben und die Eltern auf diese Ereignisse reagieren lassen.In Ihrem speziellen Fall können Sie eine benutzerdefinierte Komponente mit verwenden
v-model
. Dies ist eine spezielle Syntax, die eine nahezu bidirektionale Bindung ermöglicht, jedoch eine Abkürzung für die oben beschriebene ereignisgesteuerte Architektur darstellt. Sie können hier darüber lesen -> https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events .Hier ist ein einfaches Beispiel:
Die Dokumente geben das an
ist äquivalent zu
Aus diesem Grund muss die Requisite für das Kind als Wert bezeichnet werden, und das Kind muss ein Ereignis mit dem Namen $ ausgeben
input
.quelle
undefined
bis zur ersten Änderung. Sehen Sie sich diese Geige an, die ich auskommentiert habeprops: ['value']
. Beachten Sie, wie der Anfangswert lautetundefined
, anstatthello
: jsfiddle.net/asemahle/8Lrkfxj6 . Nach der ersten Änderung fügt Vue der Komponente dynamisch eine Wertstütze hinzu, damit sie funktioniert.Aus der Dokumentation :
Wie man Requisiten weitergibt
Es folgt der Code zum Übergeben von Requisiten an ein untergeordnetes Element:
So senden Sie ein Ereignis aus
HTML:
JS:
quelle
In der untergeordneten Komponente:
In der übergeordneten Komponente:
quelle
Untergeordnete Komponente
Verwenden Sie
this.$emit('event_name')
diese Option , um ein Ereignis an die übergeordnete Komponente zu senden.Übergeordnete Komponente
Um dieses Ereignis in der übergeordneten Komponente abzuhören, führen wir
v-on:event_name
eine Methode (ex. handleChange
) aus, die wir für dieses Ereignis ausführen möchtenGetan :)
quelle
Ich bin mit den Ereignisausgabe- und V-Modell-Antworten für die oben genannten einverstanden. Ich dachte jedoch, ich würde veröffentlichen, was ich über Komponenten mit mehreren Formularelementen gefunden habe, die an ihre übergeordneten Elemente zurückgegeben werden sollen, da dies einer der ersten von Google zurückgegebenen Artikel zu sein scheint.
Ich weiß, dass die Frage eine einzelne Eingabe spezifiziert, aber dies schien die engste Übereinstimmung zu sein und könnte Menschen mit ähnlichen Vue-Komponenten Zeit sparen. Auch hat der
.sync
Modifikator noch niemand erwähnt .Soweit ich weiß, ist die
v-model
Lösung nur für eine Eingabe geeignet, die an die übergeordnete Person zurückkehrt. Ich habe ein bisschen Zeit gebraucht, um danach zu suchen, aber die Dokumentation zu Vue (2.3.0) zeigt, wie mehrere in die Komponente gesendete Requisiten wieder an die übergeordnete Komponente synchronisiert werden (natürlich über Emit).Es wird entsprechend als
.sync
Modifikator bezeichnet.In der Dokumentation heißt es:
Sie können auch mehrere gleichzeitig synchronisieren, indem Sie ein Objekt senden. Lesen Sie hier die Dokumentation
quelle
Einfacher ist die Verwendung
this.$emit
Father.vue
Child.vue
Mein vollständiges Beispiel: https://codesandbox.io/s/update-parent-property-ufj4b
quelle
Es ist auch möglich, Requisiten als Objekt oder Array zu übergeben. In diesem Fall werden die Daten in beide Richtungen gebunden:
(Dies wird am Ende des Themas vermerkt: https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow )
quelle
Der richtige Weg führt zu
$emit()
einem Ereignis in der untergeordneten Komponente, auf das die Hauptinstanz von Vue wartet .quelle
1) Untergeordnete Komponente: Sie können Folgendes in der untergeordneten Komponente verwenden. Schreiben Sie wie folgt: this.formValue dient zum Senden einiger Daten an die übergeordnete Komponente
2) Parrent Compnenet: und im Parrent Component Tag erhalten Sie eine Sendevariable wie folgt: und dies ist der Code, um die untergeordneten Compnent-Daten im Parent Component Tag zu empfangen
quelle
Eine andere Möglichkeit besteht darin, eine Referenz Ihres Setzers vom Elternteil als Requisite an die untergeordnete Komponente zu übergeben, ähnlich wie sie es in React tun. Angenommen, Sie haben eine Methode
updateValue
auf dem übergeordneten Element, um den Wert zu aktualisieren. Sie können die untergeordnete Komponente wie folgt instanziieren :<child :updateValue="updateValue"></child>
. Dann haben Sie auf dem Kind eine entsprechende Requisite:props: {updateValue: Function}
und rufen in der Vorlage die Methode auf, wenn sich die Eingabe ändert :<input @input="updateValue($event.target.value)">
.quelle
Ich weiß nicht warum, aber ich habe gerade die übergeordneten Daten erfolgreich aktualisiert, indem ich Daten als Objekt verwendet habe.
:set
&computed
Parent.vue
Child.vue
quelle
In diesem Beispiel erfahren Sie, wie Sie den Eingabewert über die Schaltfläche "Senden" an das übergeordnete Element übergeben.
Definieren Sie zuerst eventBus als neuen Vue.
quelle
Ich denke, das wird den Trick machen:
@change="$emit(variable)"
quelle