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 balise de sous-composant explicite pour le moment. Pour transmettre des données au sous-composant, vous devez utiliser la liaison dans

  <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 Vue

Problème de transfert de valeur du composant VUE2.0

Introduction à la méthode de transmission de valeurs en php

Ce 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!