Was tun, wenn bei der Vue-Synchronisierung ein Fehler auftritt?

Vue-Synchronisierungsfehlerlösung: 1. Ändern Sie die von der übergeordneten Komponente übergebenen Daten. Der Code lautet wie folgt: „<child-dialog :name.sync="userName"></child-Dialog>“; Ändern Sie den erforderlichen Wert. Der übergebene Basisdatentypwert wird mit Code wie „“ in das Objekt eingefügt.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Vue Version 3, Dell G3-Computer.

Was soll ich tun, wenn bei der Vue-Synchronisierung ein Fehler auftritt?

Vue modifier.sync (Vermeiden Sie das direkte Mutieren einer Requisite, da ... eine Lösung für die Fehlerberichterstattung)

Vorwort

Wir alle wissen, dass untergeordnete Komponenten die von der übergeordneten Komponente übergebenen Requisiten ändern. Es wird ein Fehler gemeldet , wie unten gezeigt

1. Was ist .sync

Wenn wir Daten über Eltern-Kind-Komponenten hinweg ändern möchten, benötigen wir Kommunikation zwischen Eltern-Kind-Komponenten und Eltern-Kind-Kommunikation: Daten an die untergeordnete Komponente binden und Dann verwendet die untergeordnete Komponente Requisiten, um es zu empfangen. Während der Übergabe vom untergeordneten zum übergeordneten Element muss die übergeordnete Komponente Ereignisse an die Komponente binden, und die untergeordnete Komponente verwendet $emit, um das Ereignis zu übergeben. Das Schreiben einer solchen Datenänderung ist etwas mühsam. und der .sync-Modifikator ist eine Abkürzung für mehr als eine untergeordnete Komponente, um die übergeordnete Komponente zu ändern

3. Andere Requisiten der bidirektionalen Bindungsmethode

Übergeben Sie das Objekt

Übergeben Sie, was übergeben werden muss Wenn der Basisdatentypwert in das Objekt eingefügt wird, wird beim Ändern des Werts im Objekt kein Fehler gemeldet Das Prinzip besteht darin, dass das von der Unterkomponente empfangene Objekt und das von der übergeordneten Komponente übergebene Objekt dieselbe Speicheradresse haben erreicht.

Übergeordnete Komponente

：props名称 . sync=“props值”
$emit( “ update：props名称 ” ,新值)

<child-dialog :name.sync="userName"></child-Dialog>

Untergeordnete Komponente

<el-button type="primary" @click="changeName(&#39;王五&#39;)">修改名字</el-button>

methods:{
changeName(newName){
//修改父组件传过来的数据
this.$emit('update:name', newName)
}
}

Empfohlenes Lernen: „vue.js Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonWas tun, wenn bei der Vue-Synchronisierung ein Fehler auftritt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!