So implementieren Sie die Datenübertragung, Änderung und Aktualisierung von Eltern-Kind-Komponenten in Vue (ausführliches Tutorial)

Im Folgenden werde ich einen Artikel über die Datenübertragungs-, Änderungs- und Aktualisierungsmethoden von Vue-Eltern-Kind-Komponenten veröffentlichen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist.

Die Datenbeziehung zwischen übergeordneten und untergeordneten Komponenten. Ich werde die Situation in die folgenden 4 Typen unterteilen:

Änderung der übergeordneten Komponente child Die Daten der Komponente werden in Echtzeit aktualisiert

Die Unterkomponente übergibt die Daten der Unterkomponente über $emit This.$data bezieht sich auf alle Daten in den Daten (. return{...}) der aktuellen Komponente,

this.$emit('data',this.$data);

Empfangen Sie dann die Daten über die getinputdata-Methode der übergeordneten Komponente

@data='getinputdata'

Die Daten sind die übergebenen Daten, indem Sie diese Daten ändern. Die untergeordnete Komponente kann in Echtzeit über die übergeordnete Komponente aktualisiert werden

getinputdata(data) {
 console.log(data);
 data.background = {
  backgroundColor: 'yellow',
  border: 'none'
 };
}

Die untergeordnete Komponente ändert die Daten der übergeordneten Komponente

Die Daten der übergeordneten Komponente können nicht aktualisiert werden In der untergeordneten Komponente geändert werden. Die Daten können in der übergeordneten Komponente nur über die oben genannte $emit-Methode geändert werden.

Sie können sich die benutzerdefinierten Ereignisse auf der offiziellen Vue-Website ansehen: https://cn.vuejs.org/v2/guide/components.html#%E8%87%AA%E5%AE%9A% E4%B9% 89%E4%BA%8B%E4%BB%B6

Die untergeordnete Komponente ruft die Daten der übergeordneten Komponente ab und ändert sie, aktualisiert sie jedoch nicht in Echtzeit

1. Die untergeordnete Komponente wird übergeordnet. Die von der Komponente über Requisiten übergebenen Daten werden dann der deklarierten Variablen let oder var zugewiesen, und dann kann diese Variable verwendet werden.

let test = this.testoutdata;
test++;
console.log(test);
console.log('test:'+this.testoutdata);

2. Die untergeordnete Komponente überträgt die von der übergeordneten Komponente übergebenen Daten über Requisiten, weist dann den Requisitenwert der Variablen in data(return{...}) zu und verwendet diese Variable dann.

this.outtest++;
console.log(this.outtest);
console.log('test:'+this.testoutdata);

Sie können sich die benutzerdefinierten Ereignisse auf der offiziellen Vue-Website ansehen: https://cn.vuejs.org/v2/guide/components.html#%E5%8D%95%E5%90%91 %E6%95 %B0%E6%8D%AE%E6%B5%81

Die übergeordnete Komponente ruft die Daten der untergeordneten Komponente ab und ändert sie, aktualisiert sie jedoch nicht in Echtzeit

Die Methoden hier sind wie folgt. Die Methode „Die untergeordnete Komponente ruft die Daten der übergeordneten Komponente ab und ändert sie, aktualisiert sie jedoch nicht in Echtzeit“ ist dieselbe, nur die Art und Weise, wie der Wert übergeben wird ist anders. Die untergeordnete Komponente übergibt den Wert über $emit an die übergeordnete Komponente.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Vue.js benutzerdefinierte Ereignisformular-Eingabekomponentenmethode

vue.js verschiebt die Array-Position und aktualisiert sie an der Gleichzeitig View-Methode

vue.js oder js-Methode zur Implementierung der chinesischen A-Z-Sortierung

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Datenübertragung, Änderung und Aktualisierung von Eltern-Kind-Komponenten in Vue (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!