Mettre à jour les propriétés calculées d'un composant parent après que le composant enfant ait modifié les données du accessoire

Question

Je dois créer un objet de requête API relativement complexe avec un grand nombre de composants d'interface utilisateur chargés de mettre à jour les différentes propriétés de l'objet.

Je transmets le modèle de requête de base en tant qu'accessoire du composant parent à ses composants enfants, et les composants enfants le transmettent à leurs composants (à travers les générations).

Au niveau parent, j'ai une propriété calculée qui renvoie un champ de ce modèle de données et une surveillance pour cette propriété calculée.

Lorsque le composant enfant met à jour une propriété sur le modèle, il se met à jour avec succès partout qui y fait référence, mais la propriété calculée sur le composant parent ne peut pas être recalculée, donc la montre ne s'active jamais.

Je suppose que j'ai raté un point ici, mais je ne peux pas imaginer comment mettre à jour sans recourir à une longue chaîne d'événements via l'interface utilisateur. Comment dois-je résoudre ce problème ?

Answer 1

Pour toute personne ayant des problèmes similaires - d'après mes recherches, modifier les valeurs de référence sur les accessoires ne semble pas être un moyen prévu de le faire avec VueJS. C'est dommage car au départ cela ressemblait à un motif plutôt soigné.

J'ai maintenant implémenté vuex qui fonctionne bien et évite la longue ligne d'événements vers le propriétaire d'origine des données d'accessoires.

Si vous souhaitez appuyer dessus, alors modifier la référence de l'objet lui-même forcera la mise à jour de la chaîne. Ainsi (par exemple), si vous souhaitez mettre à jour une propriété de tableau avec des données prop, vous n'avez pas besoin de la "pousser", mais plutôt de remplacer l'objet tableau entier (ce qui entraîne le recalcul d'autres composants avec des propriétés calculées sur cette propriété de tableau) . Mais encore une fois, ce n'est pas recommandé.