So verwenden Sie Mixins in Vue

Vorwort

In Vue gibt es ein Einstellungselement namens „Mixins“, das zur Wiederverwendung von Code verwendet wird. Gleichzeitig werden diese Mixins auch in lokale Mixins und globale Mixins unterteilt

Die Erklärung in vue lautet wie folgt. Wenn Sie die Sprache langweilig finden, können Sie sie überspringen.

Mixins: Eine sehr flexible Möglichkeit, wiederverwendbare Funktionen in Vue-Komponenten zu verteilen. 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 gemischt. Anwendungsszenario

Lassen Sie uns zunächst über das Anwendungsszenario von Mixins sprechen. Angenommen, wir haben jetzt zwei Komponenten. Wenn diese beiden Komponenten angeklickt werden, müssen beide den Wert eines Namensattributs in den Daten über console.log protokollieren.

Die erste Komponente ist die Schulkomponente, wie unten gezeigt

Die zweite Komponente ist die Studentenkomponente

Wir können sehen, dass zwei verschiedene Komponenten eine Methode mit derselben Funktion haben. Diese Schreibweise führt dazu, dass wir denselben Code in zwei Komponenten schreiben. Zwei Komponenten sind akzeptabel, aber wenn es 200 Komponenten gibt, die solche Funktionen benötigen, wird das ärgerlich. Zu diesem Zeitpunkt können wir Mixins verwenden, um Code wiederzuverwenden.

Anwendung

1. Erstellen Sie eine Mixin-Datei und stellen Sie die entsprechenden Daten bereit

Da es freiliegt, muss es natürlich für andere zur Nutzung für Komponenten genutzt werden

2. Lassen Sie uns zuerst über lokale Mixins sprechen. Lokale Mixins bedeuten, dass VueComponet nacheinander eingemischt wird. Globale Mixins werden natürlich in das Vue-Objekt (Vm) eingemischt.

So schreiben Sie ein lokales Mixin

Machen Sie dasselbe für die Studentenkomponente.

Nach Abschluss können wir die Funktion auf dieselbe Weise abschließen, wenn wir darauf klicken. Die Methode showName haben wir über Mixins eingemischt und nur einmal geschrieben.

Das Obige ist ein lokaler Mixin, der in jedem VueComponet gemischt werden muss

3. Lassen Sie uns über globales Mixin sprechen. Wir mischen es in das Vue-Objekt. Auf diese Weise verfügen alle Komponenten unter Vue über diese Methode, und es ist nicht erforderlich, sie für jede Komponente zu schreiben. Diese Schreibmethode wird verwendet, wenn festgestellt wird, dass alle Komponenten diese Methode oder dieses Attribut benötigen. Im Allgemeinen verwenden wir sie nicht auf diese Weise.

So geht’s

In die Datei main.js importieren

Bei dem Obigen handelt es sich um eine globale Mischung, die im Allgemeinen nicht häufig verwendet wird, da alle Komponenten, alle Komponenten und alle Komponenten gemischt werden. Eine solche Nachfrage gibt es selten

Lassen Sie uns abschließend darüber sprechen, was passiert, wenn die eingemischten Methoden, Eigenschaften und Hook-Funktionen bereits lokal vorhanden sind und ein Konflikt auftritt. Wenn es Methoden, Eigenschaften und Hook-Funktionen mit demselben Namen wie die eingemischten Methoden und Eigenschaften in dieser Komponente gibt, haben die in dieser Komponente vorhandenen Methoden Vorrang und die eingemischten Methoden und Eigenschaften haben keine Wirkung.

Die Lebenszyklus-Hook-Funktion wird jedoch unabhängig davon wirksam, ob sie sich in dieser Komponente befindet oder eingemischt ist. Der eingemischte Lebenszyklus-Hook wird zuerst ausgeführt und dann der Lebenszyklus-Hook dieser Komponente.

Zusammenfassen

Dies ist das Ende dieses Artikels zur Verwendung von Mixins in Vue. Weitere Informationen zur Verwendung von Mixins in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!