Detaillierte Erklärung der Requisiten und Kontextparameter der SetUp-Funktion in Vue3

<Vorlage>
  <div Klasse="Box">
    Übergeordnete Komponente</div>
  <no-cont :meintitle="Nachricht" 
      othertitle="Titel anderer"
      @sonclick="sonclick">
  </kein-forts>
</Vorlage>

<script lang="ts">
importiere NoCont aus "../components/NoCont.vue"
Standard exportieren {
  aufstellen () {
    lass msg = {
      Titel: „Daten von der übergeordneten Komponente zur untergeordneten Komponente“
    }
    Funktion Sonclick (msss:Zeichenfolge) {
      Konsole.log(msss)
    }
    returniere {msg,sonclick}
  },
  Komponenten: {
    Keine Fortsetzung
  }
}
</Skript>

<Vorlage>
    <div @click="sonHander">
        Ich bin die Daten in der untergeordneten Komponente</div>
</Vorlage>

<script lang="ts">
importiere { defineComponent, setup } von „vue“;
exportiere StandarddefiniereKomponente({
  Name: 'NoCont',
 // Nicht akzeptiert // props:{
 // meinTitel:{
 // Typ:Objekt
 // }
 // },
  Setup (Requisiten, Kontext) {
    console.log('props==>',props.mytitle);//Der Ausgabewert ist nicht definiert
    Funktion sonHander(){
        context.emit('sonclick','Unterkomponente wird an übergeordnete Komponente übergeben')
    }
    return {sonHander}
  }
});
</Skript>

Requisiten:{
    meinTitel:{
        Typ:Objekt
    }
},

<Vorlage>
    <div @click="sonHander">
        Ich bin die Daten in der untergeordneten Komponente</div>
</Vorlage>

<script lang="ts">
importiere { defineComponent, setup } von „vue“;
exportiere StandarddefiniereKomponente({
  Name: 'NoCont',
  Requisiten:{
      meinTitel:{
          Typ:Objekt
      }
  },
  Setup (Requisiten, Kontext) {
    //Ausgabe {Titel: vom übergeordneten Bestandteil übergebener Wert}
    console.log('props==>',props.meinTitel);
    
    // Titel anderer Personen ausgeben [Verwenden Sie den Kontext, um den Wert zu erhalten. Es sind keine Requisiten erforderlich, um ihn zu akzeptieren.]
    Konsole.log('Kontext==> ',Kontext.attrs.andererTitel);
    
    // Gibt undefiniert aus, da der Kontext zum Akzeptieren keine Props verwenden muss.
    console.log('contextmytitle==> ',context.attrs.mytitle);
    Funktion sonHander(){
        context.emit('sonclick','Unterkomponente wird an übergeordnete Komponente übergeben')
    }
    return {sonHander}
  }
});
</Skript>

<Vorlage>
    <div @click="sonHander">
        Ich bin die Daten in der untergeordneten Komponente</div>
</Vorlage>

<script lang="ts">
importiere { defineComponent, setup } von „vue“;
exportiere StandarddefiniereKomponente({
  Name: 'NoCont',
  Requisiten:{
      meinTitel:{
          Typ:Objekt
      }
  },
  Setup (Requisiten, Kontext) {
    Funktion sonHander(){
        context.emit('sonclick','Unterkomponente wird an übergeordnete Komponente übergeben')
    }
    return {sonHander}
  }
});
</Skript>

<Vorlage>
    <div @click="sonHander">
        Ich bin die Daten in der untergeordneten Komponente</div>
</Vorlage>

<script lang="ts">
importiere { defineComponent, setup } von „vue“;
exportiere StandarddefiniereKomponente({
  Name: 'NoCont',
  Requisiten:{
      meinTitel:{
          Typ:Objekt
      }
  },
  Setup (Eigenschaften, {Attribute, Slots, Ausgabe}) {
    //Verwenden Sie emit direkt, um Ereignisse zu versenden. Funktion sonHander(){
        emit('sonclick','Unterkomponente wird an übergeordnete Komponente übergeben')
    }
    return {sonHander}
  }
});
</Skript>

<Vorlage>
<hr/>
   <h2>Unterkomponenten</h2>
    <div @click="sonHander">
        Ich bin die Daten in der untergeordneten Komponente</div>
    <h2>Verwenden der Props-Deklaration zum Empfangen von ==>{{ mytitle }}</h2> 
    <h2>Verwenden Sie den Parameter attrs, um ==>{{ attrs.othertitle }} zu erhalten</h2> 
</Vorlage>

<script lang="ts">
importiere { defineComponent, setup } von „vue“;
exportiere StandarddefiniereKomponente({
  Name: 'NoCont',
  Requisiten:{
      meinTitel:{
          Typ:Objekt
      }
  },
  Setup (Eigenschaften, {Attribute, Slots, Ausgabe}) {
    Funktion sonHander(){
        emit('sonclick','Unterkomponente wird an übergeordnete Komponente übergeben')
    }
    returniere {sonHander,attrs}
  }
});
</Skript>