Vue.js Mixins

Mixins definieren einen Teil wiederverwendbarer Methoden oder berechneter Eigenschaften. Mixin-Objekte können beliebige Komponentenoptionen enthalten. Wenn eine Komponente ein Mixin-Objekt verwendet, werden alle Optionen des Mixin-Objekts in die eigenen Optionen der Komponente eingemischt.

Schauen wir uns ein einfaches Beispiel an:

Optionen zusammenführen

Wenn die Komponente und das Mixin-Objekt Optionen mit demselben Namen enthalten, werden diese Optionen auf geeignete Weise zusammengeführt.

Zum Beispiel werden Datenobjekte intern flach zusammengeführt (eine Ebene der Eigenschaftstiefe), und wenn sie mit den Daten der Komponente in Konflikt stehen, haben die Daten der Komponente Vorrang.

Im folgenden Beispiel enthalten die Vue-Instanz und das Mixin-Objekt dieselben Methoden. Aus dem Ausgabeergebnis können wir erkennen, dass beide Optionen zusammengeführt werden.

Mixin call
Component call

Wenn in der methods-Option identische Funktionsnamen vorhanden sind, hat die Vue-Instanz höhere Priorität. Im folgenden Beispiel enthalten sowohl die Vue-Instanz als auch die methods-Optionen des Mixin-Objekts dieselben Funktionen:

HelloWorld 方法
start 方法
Main：相同方法名

Im obigen Beispiel haben wir die folgenden drei Methoden aufgerufen:

vm.hellworld();
vm.start();
vm.samemethod();

Aus dem Ausgabeergebnis: Wenn in der Option methods derselbe Funktionsname vorkommt, hat die Vue-Instanz eine höhere Priorität und führt die Ausgabe aus.

Globales Mixin

Sie können auch ein Mixin-Objekt global registrieren. Beachten Sie die Verwendung! Sobald ein globales Mixin-Objekt verwendet wird, wirkt es sich auf alle danach erstellten Vue-Instanzen aus. Bei richtiger Verwendung kann es Verarbeitungslogik für benutzerdefinierte Objekte injizieren.

Verwenden Sie globale Mixin-Objekte mit Vorsicht, da sie jede einzeln erstellte Vue-Instanz beeinflussen (einschließlich Vorlagen von Drittanbietern).