Wie implementiert man eine unidirektionale Bindung im Vue-Komponentenübergabeobjekt?

Jetzt werde ich Ihnen ein Beispiel für die unidirektionale Bindung in dem von der Vue-Komponente übergebenen Objekt vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

Bei der Verwendung von Vue-Komponenten ist es häufig erforderlich, Daten zwischen Komponenten zu übertragen. Wir werden hier nicht auf die Situation der Übergabe einer Zeichenfolgenvariablen oder numerischen Variablen eingehen Ich schlage vor, dass zwischen Komponenten beim Übergeben von Objekten eine Falle auftritt.

Wenn ein Objekt zwischen Komponenten übergeben wird, zeigt der Referenztyp dieses Objekts auf eine Adresse. Wenn ein bestimmter Attributwert des Objekts in der untergeordneten Komponente geändert wird, wird das entsprechende Attribut des Objekts in der übergeordneten Komponente geändert Wenn eine solche bidirektionale Bindung erforderlich ist, ist dies ebenfalls eine gute Methode. Wenn eine solche bidirektionale Bindung jedoch nicht erforderlich ist, muss ein neues Objekt definiert werden, um die Eigenschaften zu kopieren Die Gefahr liegt hier. Wenn Sie ein gewöhnliches var- oder let-Objekt verwenden, zum Beispiel:

computed: { 
  data: function () { 
   let obj={}; 
   obj=this.message//this.message是父组件传递的对象 
   return obj 
 } 
 },

, binden Sie jedes Attribut in den Daten entsprechend an das Eingabefeld und versuchen Sie es Um es zu ändern, werden Sie feststellen, dass sich die entsprechenden Eigenschaften in der übergeordneten Komponente noch ändern und der unidirektionale Bindungseffekt nicht erreicht wird. Zu diesem Zeitpunkt müssen Sie eine Methode

computed: { 
 data: function () { 
  let obj=Object.assign({}, this.message); 
  return obj 
 } 
 },

hinzufügen Die auf diese Weise zurückgegebenen Daten sind ein neues Objekt und verweisen nicht auf die Adresse des ursprünglichen Objekts. Daher hat eine Änderung keine Auswirkungen auf die Objekte in der übergeordneten Komponente.

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

Verwandte Artikel:

Analyse des Konzepts und der Verwendung anonymer JS-Funktionen und anonymer selbstausführender Funktionen

Lösung des Problems, wenn Installation als NPM-Administrator Berechtigungsprobleme

Grundkenntnisse und Arbeitsprinzipien des Vue-Routers

Das obige ist der detaillierte Inhalt vonWie implementiert man eine unidirektionale Bindung im Vue-Komponentenübergabeobjekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!