web-dev-qa-db-fra.com

Comment envoyer des valeurs mises à jour du composant parent au composant enfant dans Vue JS?

Je passe une variable du composant parent au composant enfant via des accessoires. Mais avec certaines opérations, la valeur de cette variable est modifiée, c'est-à-dire au clic d'un bouton dans le composant parent, mais je ne savais pas comment transmettre cette valeur mise à jour à l'enfant? supposons que la valeur d'une variable est initialement fausse et qu'il y a un bouton Modifier dans le composant parent. je modifie la valeur de cette variable en cliquant sur le bouton Modifier et je souhaite transmettre la valeur mise à jour du composant parent au composant enfant.

vue.jsvuejs2vue-component
16
Ravi Garg

La valeur de votre propriété doit être mise à jour dynamiquement lors de l'utilisation d'accessoires entre les composants parent et enfant. Selon votre exemple et l'état initial de la propriété étant faux, il est possible que la valeur n'ait pas été correctement transmise au composant enfant. Veuillez confirmer que votre syntaxe est correcte. Vous pouvez vérifier ici pour référence.

Cependant, si vous souhaitez effectuer un ensemble d'actions à chaque fois que la valeur de la propriété change, vous pouvez utiliser un observateur .

MODIFIER:

Voici un exemple utilisant à la fois les accessoires et les observateurs:

HTML

<div id="app">
    <child-component :title="name"></child-component>
</div>

Javascript

Vue.component('child-component', {
  props: ['title'],
  watch: {
    // This would be called anytime the value of title changes
    title(newValue, oldValue) {
      // you can do anything here with the new value or old/previous value
    }
  }
});

var app = new Vue({
  el: '#app',
  data: {
    name: 'Bob'
  },
  created() {
    // changing the value after a period of time would propagate to the child
    setTimeout(() => { this.name = 'John' }, 2000);
  },
  watch: {
    // You can also set up a watcher for name here if you like
    name() { ... }
  }
});
14
Olajide Oye

Vous pouvez regarder une variable (props) avec vue watch .

par exemple:

<script>
export default {
  props: ['chatrooms', 'newmessage'],
  watch : {
    newmessage : function (value) {...}
  },
  created() {
    ...
  }
}
</script>

J'espère que cela résoudra votre problème. :)

8
LakiGeri

Vous pouvez utiliser Dynamic Props.

Cela transmettra les données dynamiquement du parent au composant enfant comme vous le souhaitez.

3
nthtung