setup(props,context){}
Der erste Parameter props:
props ist ein Objekt, das alle Daten enthält, die von der übergeordneten Komponente an die untergeordnete Komponente übergeben werden.
Verwenden Sie zum Empfangen Requisiten in untergeordneten Komponenten.
Ein Objekt, das alle in der Konfiguration deklarierten und übergebenen Eigenschaften enthält
. Das heißt: Wenn Sie den von der übergeordneten Komponente über Requisiten übergebenen Wert ausgeben möchten.
Sie müssen Requisiten zum Empfangen der Konfiguration verwenden. Das heißt, props:{......}
Wenn Sie die Konfiguration über Props nicht akzeptieren, ist der Ausgabewert undefiniert
<template>
<div>
Übergeordnete Komponente</div>
<no-cont :mytitle="msg"
othertitle="Titel anderer"
@sonclick="sonclick">
</no-cont>
</template>
<Skript>
NoCont aus „../components/NoCont.vue“ importieren
Standard exportieren {
aufstellen () {
let msg={
Titel:'Daten von der übergeordneten Komponente zur untergeordneten Komponente'
}
Funktion sonclick(msss:string){
console.log(msss)
}
return {msg,sonclick}
},
Komponenten:{
NeinForts
}
}
</script> <template>
<div @click="sonHander">
Ich bin die Daten in der untergeordneten Komponente</div>
</template>
<Skript>
import { defineComponent,setup } from 'vue';
Standard exportieren defineComponent({
Name: 'NoCont',
// Keine Annahme // props:{
// meinTitel:{
// Typ:Objekt
// }
// },
setup(props,context){
console.log('props==>',props.mytitle);//Der Ausgabewert ist undefiniert
Funktion sonHander(){
context.emit('sonclick','Die untergeordnete Komponente wird an die übergeordnete Komponente übergeben')
}
Rückkehr {sonHander}
}
});
</script>
Warum ist der über props.mytitle ausgegebene Wert undefiniert?
Weil wir keine Requisiten zum Empfangen der Konfiguration verwendet haben. Das sind
Requisiten:{
meinTitel:{
Typ:Objekt
}
}, wenn wir die Akzeptanzkonfiguration hinzufügen
Der zweite Parameter: Kontext ist ein Objekt.
Es gibt attrs darin (ein Objekt, das alle Attribute des aktuellen Tags erhält),
aber dieses Attribut umfasst alle Objekte, die nicht für den Empfang in Requisiten deklariert sind.
Wenn Sie props verwenden, um den Wert zu erhalten, und gleichzeitig den Wert angeben, den Sie erhalten möchten
, ist der erhaltene Wert undefiniert
.Hinweis:
Um den Wert von attrs zu erhalten, ist keine Deklaration in den props erforderlich, um ihn zu erhalten .
Der durch den ersten Parameter erhaltene Wert props muss in den props deklariert werden, um
die Emit-Ereignisverteilung (dieses Ereignis muss bei der Übergabe an die übergeordnete Komponente verwendet werden)
und den Slots-Slot
<template>zu empfangen
<div @click="sonHander">
Ich bin die Daten in der untergeordneten Komponente</div>
</template>
<Skript>
import { defineComponent,setup } from 'vue';
Standard exportieren defineComponent({
Name: 'NoCont',
Requisiten:{
meinTitel:{
Typ:Objekt
}
},
setup(props,context){
//Ausgabe {Titel: von der übergeordneten Komponente übergebener Wert}
console.log('props==>',props.mytitle);
// Titel anderer Leute ausgeben [Kontext verwenden, um den Wert zu erhalten, keine Notwendigkeit, Requisiten zum Akzeptieren zu verwenden]
console.log('context==> ',context.attrs.othertitle);
// Ausgabe undefiniert, da der Kontext keine Requisiten zum Akzeptieren benötigt.
console.log('contextmytitle==> ',context.attrs.mytitle);
Funktion sonHander(){
context.emit('sonclick','Die untergeordnete Komponente wird an die übergeordnete Komponente übergeben')
}
Rückkehr {sonHander}
}
});
</script>
3. Die untergeordnete Komponente sendet Ereignisse an die übergeordnete Komponente
<template>
<div @click="sonHander">
Ich bin die Daten in der untergeordneten Komponente</div>
</template>
<Skript>
import { defineComponent,setup } from 'vue';
Standard exportieren defineComponent({
Name: 'NoCont',
Requisiten:{
meinTitel:{
Typ:Objekt
}
},
setup(props,context){
Funktion sonHander(){
context.emit('sonclick','Die untergeordnete Komponente wird an die übergeordnete Komponente übergeben')
}
Rückkehr {sonHander}
}
});
</script> 4. Optimieren Sie das Versenden von Ereignissen.
Wir wissen, dass der zweite Parameterkontext ein Objekt ist
und das Objektüber
drei Attribute attrs, slots und emit verfügt.
Beim Versenden von Ereignissen ist es in Ordnung, emit direkt zu verwenden
<div @click="sonHander">
Ich bin die Daten in der untergeordneten Komponente</div>
</template>
<Skript>
import { defineComponent,setup } from 'vue';
Standard exportieren defineComponent({
Name: 'NoCont',
Requisiten:{
meinTitel:{
Typ:Objekt
}
},
setup(props,{attrs,slots,emit}){
//Emit direkt für die Event-Dispatch-Funktion verwenden sonHander(){
emit('sonclick','Die untergeordnete Komponente wird an die übergeordnete Komponente übergeben')
}
Rückkehr {sonHander}
}
});
</script> 5. Rufen Sie den von der übergeordneten Komponente übergebenen Wert ab.
Wir verwenden den Parameter props, um den Wert abzurufen
, und attrs, um den Wert<template>
abzurufen
<hr/>
<h2>Unterkomponente</h2>
<div @click="sonHander">
Ich bin die Daten in der untergeordneten Komponente</div>
<h2>Props-Anweisung verwendet, um ==>{{ mytitle }}</h2> zu erhalten
<h2>Verwenden Sie den Parameter attrs, um ==>{{ attrs.othertitle }}</h2> zu erhalten
</template>
<Skript>
import { defineComponent,setup } from 'vue';
Standard exportieren defineComponent({
Name: 'NoCont',
Requisiten:{
meinTitel:{
Typ:Objekt
}
},
setup(props,{attrs,slots,emit}){
Funktion sonHander(){
emit('sonclick','Die untergeordnete Komponente wird an die übergeordnete Komponente übergeben')
}
return {sonHander,attrs}
}
});
</script>
Das Obige ist eine detaillierte Erklärung der Parameter der Setup-Funktion in vue3 – Requisiten und Kontext Informationen, bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!
