Maison >interface Web >js tutoriel >Partagez deux méthodes pour transmettre dynamiquement des valeurs des composants parents de Vue aux composants enfants
Dans certaines exigences du projet, le composant parent doit transférer dynamiquement les valeurs aux composants enfants. Par exemple, mon exigence ici est que le composant parent obtienne dynamiquement le tableau d'URL d'image renvoyé via axios, puis le transmette. le composant enfant. Le composant enfant qui télécharge l'image obtient le Une fois le tableau parcouru et l'image affichée. Cet article présente principalement deux méthodes pour transférer dynamiquement des valeurs des composants parents de Vue vers les composants enfants. J'espère que cela pourra aider tout le monde.
Il existe deux méthodes,
Méthode 1 :
les accessoires transmettent la valeur, faites attention à un problème ici, la valeur transmise doit être surveillée et attribuée avec la montre, sinon il sera obtenu ici est un tableau vide
Composant parent :
<uploadImg :width="200" :height="200" name="productImage" size="750px*750px" ref="productImage" :src-list="this.productImage"></uploadImg>
this.productImage=res.data.cover;
Ici, attribuez le tableau renvoyé par l'arrière-plan à
this.productImage, puis passez le tableau à L'attribut props src-list
défini par le sous-composant :
watch:{ srcList(curVal,oldVal){ if(curVal){ ; this.uploadImg=curVal; } }, }
Ensuite, le sous-composant obtient avec succès le tableau
Méthode 2 :
Grâce à l'attribut ref, le composant parent appelle la méthode du composant enfant et passe le tableau à passer en paramètre au composant enfant. Le composant enfant obtient le paramètre et utilise
<.> Composant parent :this.$refs.productImage.getSrcList(res.data.cover);Sous-composant :
getSrcList(val){ this.uploadImg=val; }PS : Jetons un coup d'œil au composant dynamique vuejs transmettant des données au sous-composant Les accessoires lorsque la définition du sous-composant peut aider le composant parent à transmettre des données au sous-composant. Ces définitions Pour les accessoires, vous pouvez utiliser des attributs de liaison dans la balise du sous-composant. Cependant, si vous utilisez un composant dynamique
<p class="app" id="deviceready"> <component :is="currentView" :user_name.sync="user_name" :DOB.sync="DOB"></component> </p>Le rôle du composant est indépendant
Le rôle du composant est indépendant. Si vous souhaitez obtenir des données du composant, vous devez les transmettre couche par couche, c'est-à-dire que le composant enfant ne peut obtenir des données que du composant parent direct. données du composant racine, le composant parent doit continuer à exposer des pops pour lier les données du composant racine.
Recommandations associées :
Partage de la méthode de mise en œuvre simple du transfert de valeur inversé de page dans VueProblème de transfert de valeur du composant VUE2.0 Introduction à la méthode de transmission de valeurs en phpCe qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!