Vue: Zwei Komponenten auf gleicher Ebene erreichen eine Wertübertragung

Vue-Komponenten sind verbunden, daher ist es unvermeidlich, dass Komponenten Werte aneinander weitergeben müssen. Das übergeordnete Element verwendet v-bind, um benutzerdefinierte Attribute an untergeordnete Komponenten zu binden, und verwendet Props, um sie zu empfangen.

Das Kind verwendet @custom event = 'function' this.$emit('custom event', 'content to be sent') an das Elternteil. Die Kindkomponente löst die Funktion der Elternkomponente über $emit aus, um dies zu erreichen. Auf diese Weise übergeben jedoch zwei Komponenten derselben Ebene Werte aneinander.

<div id='App'>
 <Kinder1></Kinder1>
 <Kinder2></Kinder2>
</div>
<Skript>
  var Kinder1 = {};
  var Kinder2 = {};
 var vm = neuer Vue({
  el:'#app',
  Komponenten: {
   Kinder1,
   Kinder2
  }
 })
</Skript>

Jetzt müssen wir die Daten in der Komponente children1 an die Komponente children2 übergeben

Verwenden Sie hauptsächlich $on() und $emit() in der Vue-Instanz

 <div id='App'>
  <Kinder1></Kinder1>
  <Kinder2></Kinder2>
 </div>
 <Skript>
     var Event = new Vue({}); // Erstellen Sie eine Vue-Instanz, die als Medium für die Wertübertragung verwendet werden soll var children1 = {
   Vorlage:`
    <div>
     <button @click='send'>Klicken Sie hier, um Daten an die Komponente children2 zu senden</button>
    </div>
   `,
   Daten(){
    zurückkehren {
     msg:'Ich möchte Daten an Kinder senden2'
    }
   },
   Methoden:{
    schicken(){ 
     Ereignis.$emit('gehen',diese.msg) 
    }
   }
  };
   var Kinder2 = {
   Vorlage:`
    <div>
     <h2>Von der Komponente children1 empfangener Wert: {{msg1}}</h2>  
    </div>
   `,
   Daten(){
    zurückkehren {
     Nachricht1:''
    }
   },
   erstellt(){
    Event.$on('go',(v) => { // Muss die Pfeilfunktion verwenden, da dies
     dies.msg1 = v;
    })
   }
  };
  var vm = neuer Vue({
   el:'#app',
   Komponenten: {
    Kinder1,
    Kinder2
   }
  })
</Skript>

Die Komponente chilren1 verwendet Event.$emit() zum Senden von Daten
Die Komponente chilren2 verwendet Eevent.$on() zum Empfangen von Daten

Damit ist dieser Artikel über die Implementierung der Wertübertragung zwischen zwei Vue-Peer-Komponenten abgeschlossen. Weitere relevante Inhalte zur Wertübertragung von Vue-Peer-Komponenten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!