Sehen Sie sich diese einfache Warenkorb-Demo an:
Ein Benutzer kann ein Gemüse und eine Frucht auswählen und es wird in das Warenkorb-Array hinzugefügt. Die Funktion, die ein Obst / Gemüse hinzufügt, ist sehr ähnlich, und ich möchte es zu einer Funktion kombinieren, die über beide Komponenten hinweg geteilt werden kann.
%Vor%Wie kann ich es so machen, dass ich diese Methode ändern und global anwenden kann? Ich benutze den Vue Router mit diesem Projekt übrigens, danke für jede Hilfe!
Option 1
Ein Ansatz für die gemeinsame Nutzung Ihrer Methode über mehrere Komponenten hinweg ist die Verwendung eines Mixins. Hier ist ein cartMixin , das eine selectProduct Methode enthält:
Sie können dies in jeder Komponente wie folgt referenzieren:
%Vor%... und verwende es dann in deinen Vorlagen wie folgt:
%Vor%Hier ist eine Abzweigung von Ihrem Plunker .
Option 2
Nachdem Sie darüber nachgedacht haben, können Sie auch eine Basis-Komponente Product erstellen und diese erweitern, um Ihre Komponenten Fruit und Vegetable zu erstellen. Sie würden dann Ihre allgemeine Funktionalität in die Basiskomponente einfügen.
Hier ist ein Plunker mit diesem Ansatz .
Da Ihre Obst- und Gemüseschablonen so ähnlich sind, könnten Sie diese Idee noch weiter verfolgen und eine gemeinsame Vorlage aus der Basiskomponente verwenden.
Ich fand diese Technik einfacher / befriedigender, da ich die Komposition der Vererbung vorziehe:
Dies wird auch das Schreiben vue-agnostischer Tests erleichtern.
HINWEIS: Wenn Sie foo zum Ausführen in vue-scope benötigen, ersetzen Sie
this.foo = shared.foodurchthis.foo = shared.foo.bind(this)
Sie können die Methode in Ihre Root-Vue-Instanz einfügen und dann ein Ereignis von der untergeordneten Instanz senden, wenn ein Gemüse ausgewählt wird oder wenn ein Obst ausgewählt wird. Ereignisse suchen nach einem Handler für ihre Elternkomponente, und wenn sie keinen Ereignishandler finden, gehen sie weiter in die Kette, bis sie es tun. Also auf Ihrer Root-Instanz:
%Vor%Dann in der Kind-Instanz:
%Vor%Tags und Links javascript vue.js