Ich arbeite mit einem mittelgroßen Projekt, das Vuejs als Front-End verwendet. Die Optionen, die ich untersuche, um die gängigen Methoden, die in vielen Komponenten verwendet werden können, zu kapseln / trennen, beinhalten Mixins-Ansatz und Plugin-Ansatz.
Mixin-Ansatz
Ich muss eine Importanweisung in jede Komponente (Datei) schreiben, in der ich die Mixin-Methoden verwenden möchte. Erhöht dies die endgültige Dateigröße, wenn das Mixin an mehreren Stellen importiert wird? Ich kann this innerhalb der Mixin-Methoden verwenden.
Plugin-Ansatz
Ich kann das Plugin global mit Vue.use(MyPlugin) installieren und das Plugin in jeder Komponente verwenden, ohne das Plugin in jede Komponente zu importieren.
Nachteil: Ich kann this[field] nicht innerhalb der Plugin-Methoden verwenden. Ich muss die Instanz der aufrufenden Komponente vm übergeben, um solche Methoden zu verwenden.
Bearbeiten 1 - um den erweiterten Ansatz einzubeziehen
Ansatz erweitern
Ich kann eine Basiskomponente mit allen Methoden definieren, die in mehreren anderen Komponenten verwendet werden, und diese Basiskomponente dann erweitern, um neue Komponenten zu erstellen. Auch hier muss ich die Instanz der erbenden Komponente übergeben, die in der BaseComponent verwendet wird, bezieht sich nicht auf die aufrufende / erbende Komponente.
Bitte finden Sie das triviale Codebeispiel ähnlich dem, was ich unten verwende:
Meine Fragen:
Importieren einer Mixin-Datei in jede Komponente (für die die Methoden benötigt werden) ist es eine effiziente Art, es zu tun? Führt das Importieren von Mixin an mehreren Stellen (Komponentendateien) wiederholt Code von Mixin-Datei und erhöhen Sie die Dateigröße?
Übergeben der Instanz der aufrufenden Komponente vm = this als Parameter - Ist es eine gute Übung? Geht um die Komponente herum
Instanzen als Methodenparameter verursachen Effizienzprobleme?
Wie bindet man this (instance of the calling/inheriting component) an die Methoden innerhalb von plugin und / oder BaseComponent, so dass sich this auf die Instanz der aufrufenden / erbenden Komponente und nicht auf plugin / BaseComponent bezieht?
Was ich bevorzuge (jemand würde es nicht als den besten Weg betrachten, aber es ist genug für mich) ist es, Plugins zu erstellen.
Also habe ich eine Datei namens vue-utils.js mit dem Inhalt (zum Beispiel):
%Vor%Ich definiere zuerst die $ utils und dann erzeuge ich eine neue Vue-Instanz damit ich jede Eigenschaft in binded umwandeln und dann weitere Eigenschaften und Methoden definieren kann.
Dann lade es in der App auf diese Weise:
%Vor%Und Sie können die Komponente im HTML wie $ utils und in der JS durch diese. $ utils
erreichenTags und Links vue.js vue-component