Implementierung der bidirektionalen Bindung von übergeordneten und untergeordneten Komponentendaten im Front-End-Framework Vue

//Methode zum Schreiben der übergeordneten Komponente <cld :numP="num" ></cld> 
 
//Unterkomponentendefinition und Datenkomponenten:{ 
 cld:{ 
  Vorlage:'#Kind', 
  Requisiten:{ 
   numP:Nummer 
  }, 
 } 
} 
 
//Inhalt der Unterkomponente <template id="child"> 
 <div> 
  {{ numP }} 
 </div> 
</Vorlage> 

//Methode 1: Dateneigenschaften direkt empfangen: ['numP'] 
 
//Methode 2: Typbeschränkungseigenschaften hinzufügen: [ 
 numP: Nummer 
 ]  
 
//Methode 3: Standardwerteigenschaften hinzufügen: [ 
 AnzahlP: { 
  Typ: Nummer, 
  Standard: 0 
  } 
]  
 
//Methode 4: Ist es notwendig, den Wert von Requisiten zu begrenzen: [ 
 AnzahlP: { 
  Typ: Nummer, 
  Standard: 0, 
  require:true //Erforderlichen Wert hinzufügen, andernfalls wird ein Fehler gemeldet} 
]  
 
//Methode 5: Verwenden von Objektform-Eigenschaften: { 
 AnzahlP: { 
  Typ: Nummer, 
  Standard: 0, 
 } 
} 

// Inhalt der übergeordneten Komponente <div> 
 Die von der untergeordneten Komponente erhaltenen Daten sind {{getNum}} 
 <cld :numb="num" @accept="getNumC"></cld> 
</div> 
 
//Methoden der übergeordneten Komponente methods:{ 
 getNumC(Daten){ 
  this.getNum = data //Daten von untergeordneten Komponenten empfangen} 
}, 
//Unterkomponentendefinition Komponenten:{ 
 cld:{ 
  Vorlage:'#Kind', 
  Daten(){ 
   zurückkehren { 
    numC:1314 //Unterkomponentendatendefinition} 
  }, 
  montiert(){ 
    this.$emit('accept', this.numC) // benutzerdefiniertes Ereignis auslösen} 
  } 
}, 

<div id="app"> 
 Daten<br>{{num}} 
 <Eingabetyp="Text" v-Modell="num"><br> 
 <cld :numb="num" @accept="getNumC"></cld> 
</div> 
//Inhalt der Unterkomponente <template id="child"> 
 <div> 
  Daten<br>{{childNum}} 
  <Eingabetyp="Text" v-Modell="Kindnummer" /> 
 </div> 
</Vorlage> 
 
  <!-- Kommunikation zwischen übergeordneten und untergeordneten Komponenten--> 
const app = new Vue({ 
 el:'#app', 
  Daten:{ 
   Zahl: '520', 
   }, 
  Methoden:{ 
   getNumC(Daten){ 
    this.num = Daten 
   } 
  }, 
  Komponenten: { 
   cld:{ 
    Vorlage:'#Kind', 
    Requisiten:{ 
     Zahl:Zeichenfolge 
    }, 
   Daten(){ 
    zurückkehren { 
     Kinderzahl:0, 
    } 
   }, 
  betrachten:{ 
   Nummer:Funktion(){ 
    diese.Kindnummer = diese.Nummer 
   }, 
   KindNum:Funktion(){ 
    dies.$emit('akzeptieren',diese.childNum) 
    } 
   }, 
  montiert(){ 
   diese.Kindnummer = diese.Nummer 
   } 
  } 
 }  
}) 

<cld :numb.sync="Anzahl" ></cld> 
// wird erweitert zu: 
<cld:numb="Balken" @update:numb="Wert => Balken = Wert"/> 

dies.$emit("update:numb", neuerWert ); 

// Übergeordnete Komponente <Father :foo.sync="foo"></Father> 
 
//Eigenschaften der untergeordneten Komponente: ['foo'], 
Daten() { 
  zurückkehren { 
   newFoo: dies.foo; 
   } 
}, 
Methoden:{ 
 hinzufügen:Funktion(){ 
  diese.neueMsg=10; 
  dies.$emit('update:foo',dies.newFoo); 
 } 
}