setup(props,context){}
Le premier paramètre props :
props est un objet contenant toutes les données transmises par le composant parent au composant enfant.
Utilisez des accessoires dans les composants enfants à recevoir.
Un objet contenant toutes les propriétés déclarées et passées dans la configuration
. C'est-à-dire : si vous souhaitez afficher la valeur transmise par le composant parent au composant enfant via les accessoires.
Vous devez utiliser des accessoires pour recevoir la configuration. Autrement dit, props :{......}
Si vous n'acceptez pas la configuration via Props, la valeur de sortie est indéfinie
<template>
<div>
Composant parent</div>
<no-cont :mytitle="msg"
othertitle="Titre des autres"
@sonclick="sonclick">
</no-suite>
</modèle>
<script>
importer NoCont depuis "../components/NoCont.vue"
exporter par défaut {
installation () {
laissez msg={
title:'Données du composant parent au composant enfant'
}
fonction sonclick(msss:string){
console.log(msss)
}
retourner {msg,sonclick}
},
composants :{
NonCont
}
}
</script> <modèle>
<div @click="sonHander">
Je suis les données du composant enfant</div>
</modèle>
<script>
importer { définirComponent,setup } depuis 'vue' ;
exporter le composant défini par défaut ({
nom : 'NoCont',
// Aucune acceptation // accessoires :{
// montitre :{
// tape:Objet
// }
// },
configuration (accessoires, contexte) {
console.log('props==>',props.mytitle);//La valeur de sortie n'est pas définie
fonction sonHander(){
context.emit('sonclick','Le composant enfant est passé au composant parent')
}
retourner {sonHander}
}
});
</script>
Pourquoi la valeur affichée via props.mytitle n'est-elle pas définie ?
Parce que nous n'avons pas utilisé d'accessoires pour recevoir la configuration. Ce sont
des accessoires :{
montitre :{
tapez:Objet
}
}, si on ajoute la configuration d'acceptation
Le deuxième paramètre : le contexte, est un objet.
Il y a des attrs à l'intérieur (un objet qui obtient tous les attributs de la balise actuelle),
mais cet attribut correspond à tous les objets qui ne sont pas déclarés comme étant reçus dans les accessoires.
Si vous utilisez des props pour obtenir la valeur, et en même temps vous déclarez la valeur que vous souhaitez obtenir dans les props
: la valeur obtenue est indéfinie
.Remarque :
obtenir la valeur de attrs ne nécessite aucune déclaration dans les props pour la recevoir. .
La valeur obtenue par le premier paramètre props doit être déclarée dans les props pour recevoir
la distribution d'événement d'émission (cet événement doit être utilisé lors de sa transmission au composant parent)
et le slot slots
<template>
<div @click="sonHander">
Je suis les données du composant enfant</div>
</modèle>
<script>
importer { définirComponent,setup } depuis 'vue' ;
exporter le composant défini par défaut ({
nom : 'NoCont',
accessoires :{
montitre :{
tapez:Objet
}
},
configuration (accessoires, contexte) {
//Sortie {titre : valeur transmise par le composant parent}
console.log('props==>',props.mytitle);
// Afficher les titres d'autres personnes [utiliser le contexte pour obtenir la valeur, pas besoin d'utiliser des accessoires pour accepter]
console.log('context==> ',context.attrs.othertitle);
// Sortie non définie, car le contexte n'a pas besoin d'utiliser d'accessoires pour accepter.
console.log('contextmytitle==> ',context.attrs.mytitle);
fonction sonHander(){
context.emit('sonclick','Le composant enfant est passé au composant parent')
}
retourner {sonHander}
}
});
</script>
3. Le composant enfant distribue les événements au composant parent
<template>
<div @click="sonHander">
Je suis les données du composant enfant</div>
</modèle>
<script>
importer { définirComponent,setup } depuis 'vue' ;
exporter le composant défini par défaut ({
nom : 'NoCont',
accessoires :{
montitre :{
tapez:Objet
}
},
configuration (accessoires, contexte) {
fonction sonHander(){
context.emit('sonclick','Le composant enfant est passé au composant parent')
}
retourner {sonHander}
}
});
</script> 4. Optimiser la répartition des événements.
Nous savons que le deuxième paramètre context est un objet
et que l'objet a trois attributs attrs, slots et submit.
Lors de la distribution d'événements, il est possible d'utiliser submit directement
<template>.
<div @click="sonHander">
Je suis les données du composant enfant</div>
</modèle>
<script>
importer { définirComponent,setup } depuis 'vue' ;
exporter le composant défini par défaut ({
nom : 'NoCont',
accessoires :{
montitre :{
tapez:Objet
}
},
setup(props,{attrs,slots,emit}){
//Utiliser l'émission directement pour la fonction de répartition d'événements sonHander(){
émet('sonclick','Le composant enfant est passé au composant parent')
}
retourner {sonHander}
}
});
</script> 5. Récupérez la valeur transmise par le composant parent.
Nous utiliserons le paramètre props pour obtenir la valeur
et attrs pour obtenir la valeur
<template>.
<hr/>
<h2>Sous-composant</h2>
<div @click="sonHander">
Je suis les données du composant enfant</div>
<h2>Déclaration d'accessoires utilisée pour recevoir ==>{{ mytitle }></h2>
<h2>Utilisez le paramètre attrs pour obtenir ==>{{ attrs.othertitle }></h2>
</modèle>
<script>
importer { définirComponent,setup } depuis 'vue' ;
exporter le composant défini par défaut ({
nom : 'NoCont',
accessoires :{
montitre :{
tapez:Objet
}
},
setup(props,{attrs,slots,emit}){
fonction sonHander(){
émet('sonclick','Le composant enfant est passé au composant parent')
}
retourner {sonHander,attrs}
}
});
</script>
Ce qui précède est une explication détaillée des paramètres de la fonction setup dans vue3 - accessoires et contexte. Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !
