Flux de données unidirectionnel dans Vue
Toutes les props forment une liaison unidirectionnelle entre la propriété de l'enfant et celle du parent : lorsque la propriété parente est mise à jour, elle sera transmise à l'enfant, mais pas l'inverse. Cela empêche la modification accidentelle de l'état du parent par les composants enfants, ce qui pourrait rendre le flux de données de votre application difficile à comprendre.
De plus, chaque fois que le composant parent est mis à jour, toutes les props du composant enfant seront actualisées avec les dernières valeurs. Cela signifie que vous ne devriez pas tenter de modifier une prop à l'intérieur d'un composant enfant. Si vous le faites, Vue affichera un avertissement dans la console.
Il y a généralement deux cas où la tentation de modifier une prop se présente. Examinons-les.
Premier cas
La prop est utilisée pour transmettre une valeur initiale ; le composant enfant souhaite l'utiliser comme une propriété locale de données par la suite. Dans ce cas, il est préférable de définir une propriété locale dans les données qui utilise la valeur de la prop comme valeur initiale :
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
};
}
Deuxième cas
La prop est transmise comme une valeur brute qui doit être transformée. Dans ce cas, il est préférable de définir une propriété calculée en utilisant la prop :
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase();
}
}
Remarque
Notez que les objets et les tableaux en JavaScript sont passés par référence, donc si une prop est un tableau ou un objet, alors les modifications à l'intérieur du composant enfant de cet objet ou de ce tableau influenceront l'état du parent et Vue est incapable de vous en avertir. Évitez toute mutation des props, y compris des objets et des tableaux, car ignorer la liaison de données unidirectionnelle peut conduire à des résultats indésirables.
