Eine kurze Diskussion über den Vater-Sohn-Werttransfer in Vue3

// Übergeordnete Komponente <template>
  <div Klasse="Über">
    {{vaterData}}
    <!-- Vom Vater zum Sohn-->
    <!-- 1. Übergeben Sie im Unterkomponenten-Tag der übergeordneten Komponente: den an die Unterkomponente übergebenen Datennamen = „zu übergebende Daten“ -->
    <Kinder :sonData="VaterData"></Kinder>
  </div>
</Vorlage>
 
<Skript>
Kinder aus „@/components/children“ importieren
importiere { defineComponent, reactive, toRefs } von "vue";
exportiere StandarddefiniereKomponente({
  Komponenten: {
    Kinder,
  },
Name:"Über",
aufstellen(){
  const state = reaktiv({
    VaterDaten: "hallo"
  })
  zurückkehren {
    …toRefs(Status)
  }
}
 
})
</Skript>

// Unterkomponente <template>
  <div Klasse="Kinder">
    <!-- 3. Verwendung in Unterkomponentenvorlagen-->
    {{sonData}}
  </div>
</Vorlage>
<Skript>
Standard exportieren {
Name:"Kinder",
// 2. Die Unterkomponente empfängt Props über props:["sonData"],
  setup(Eigenschaften){
    Funktion Kinderaber(){
      // props.sonData kann auf die von der übergeordneten Komponente übergebenen Daten zugreifen console.log(props.sonData);
    }
    zurückkehren {
      Kinderaber
    }
  }
}
</Skript>

// Unterkomponente <template>
  <div Klasse="Kinder">
    {{sonData}}
    <!-- 1. Ereignis auslösen-->
    <button @click="childrenbut">Schaltfläche für untergeordnete Komponente</button>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
Name:"Kinder",
  Setup (Requisiten, Kontext) {
    Funktion Kinderaber(){
      konsole.log(Kontext);
      // 2. Verwenden Sie context.emit, um Daten vom Kind an das Elternteil zu übergeben. // Der erste Parameter ist der Methodenname und der zweite Parameter sind die zu übergebenden Daten. context.emit("change",'world')
    }
    zurückkehren {
      Kinderaber,
    }
  }
}
</Skript>

// Unterkomponente <script>
Standard exportieren {
Name:"Kinder",
  // Nach dem Übergeben der Struktur direkt emit schreiben {emit}
  setup(Eigenschaften,{emit}){
    Funktion Kinderaber(){
      // Context.emit weglassen
      emittieren("ändern","Welt")
    }
    zurückkehren {
      Kinderaber,
    }
  }
}
</Skript>