Ich beschäftige mich mit der Kommunikation zwischen zwei Komponenten (unter Verwendung von Vue 2), von denen eine eine Schaltfläche ist, die Zustände wie Anfang, Laden und Abschluss (Erfolg oder Misserfolg) haben kann. Für jeden Zustand der Schaltfläche kann ich einen anderen anzeigen Text, verschiedene Symbole (Laden: Drehsymbol, erfolgreicher Abschluss: Häkchen, Fehlerabschluss: x), ich habe auch ein Formular, das eine Schaltflächenkomponente verwendet. Ich bin mir nicht sicher, wie ich den Status der Schaltfläche basierend auf dem aktuellen Status der Formularübermittlung ändern kann. Bitte sehen Sie sich den Code unten an.

Meine Button-Komponente:

Meine Formularkomponente:

Im Code oben können Sie sehen, wie ich den Status der Schaltfläche basierend auf dem Status des Formulars ändere: Meine Schaltfläche gibt beim Klicken zwei Funktionen aus (startLoading, IncludedSuccessfully), und ich verwende diese beiden Funktionen dann in sendItemToCart.

Dies scheint die beiden Komponenten etwas zu sehr zu koppeln, da ich diese Funktionen als Parameter an die Methoden der übergeordneten Komponente übergeben muss. Außerdem habe ich eine andere Idee, wie das geht: Jeder Schaltfläche eine Referenz zu geben und dann ihre Methode mithilfe der Referenz in der übergeordneten Komponente aufzurufen. Die Idee klingt ein bisschen wie „Komposition statt Vererbung“ in der objektorientierten Programmierung, wo ich das Objekt/die Komponente einfach auffordere, etwas zu tun, in diesem Fall jedoch ohne die Funktion als Parameter zu nehmen.

Nun, die beiden oben genannten Fälle scheinen besser zu sein, als für jede Schaltfläche, die ich möglicherweise habe, eine Variable zu erstellen, aber sie scheinen verbesserungswürdig zu sein. Ich suche also: Wie kann ich meine Komponenten besser entkoppeln?