Detaillierte Erklärung der Mixins in Vue.js

Mixins stellen auf flexible Weise verteilte, wiederverwendbare Funktionalität für Komponenten bereit. Mixin-Objekte können beliebige Komponentenoptionen enthalten. Wenn eine Komponente ein Mixin verwendet, werden alle Optionen im Mixin in die eigenen Optionen der Komponente „eingemischt“.

1. Grundlegende Verwendung von Mixins

Nun gibt es ein Programm, das Zahlen durch Klicken hochzählt. Vorausgesetzt, es ist fertig, hoffen wir, dass bei jeder Änderung der Daten eine Meldung „Daten haben sich geändert“ in der Konsole ausgegeben werden kann.

Code-Implementierungsprozess:

<div id="app">
    <p>Anzahl:{{ Anzahl }}</p>
    <P><button @click="add">Menge hinzufügen</button></P>
</div>


<Skript>
    var addLog = {
    	// Mischen Sie den aktualisierten Hook in die Vue-Instanz updated() {
            console.log("Die Daten ändern sich in " + this.num + ".");
        }
    }

    var app = new Vue({
        el: '#app',
        Daten: {
            Zahl: 1
        },
        Methoden: {
            hinzufügen: Funktion () {
                diese.num++;
            }
        },
        Mixins: [addLog], //mixin})
</Skript>

Geben Sie hier die Bildbeschreibung ein

Wenn auf die Schaltfläche geklickt wird, wird die aktualisierte Methode im gemischten AddLog ausgelöst.

2. Die Aufrufreihenfolge von Mixins

In Bezug auf die Ausführungsreihenfolge混入的先執行，然后構造器里的再執行
Die Attribute in data und die Methoden in methods werden überschrieben (構造器覆蓋混入的屬性和方法).
Die Lifecycle-Hooks werden zweimal aufgerufen und nicht überschrieben (先調用混入鉤子再調用構造器鉤子).

Wir haben außerdem die aktualisierte Hook-Funktion zum Konstruktor des obigen Codes hinzugefügt:

<div id="app">
    <p>Anzahl:{{ Anzahl }}</p>
    <P><button @click="add">Menge hinzufügen</button></P>
</div>


<Skript>
    var addLog = {
        aktualisiert : Funktion () {
            console.log("Die Daten ändern sich in " + this.num + ".");
        }
    }

    var app = new Vue({
        el: '#app',
        Daten: {
            Zahl: 1
        },
        Methoden: {
            hinzufügen: Funktion () {
                diese.num++;
            }
        },
        aktualisiert: Funktion () {
            console.log("Methode im Konstruktor aktualisiert.")
        },
        Mixins: [addLog], //mixin})
</Skript>

Geben Sie hier die Bildbeschreibung ein

3. Globale Mixin-Methode

Globale Mixins werden vor Mixins und Konstruktormethoden ausgeführt.

<div id="app">
    <p>Anzahl:{{ Anzahl }}</p>
    <P><button @click="add">Menge hinzufügen</button></P>
</div>


<Skript>
    Vue.mixin({
        aktualisiert: Funktion () {
            console.log('Ich bin global eingebunden');
        }
    })

    var addLog = {
        aktualisiert : Funktion () {
            console.log("Die Daten ändern sich in " + this.num + ".");
        }
    }

    var app = new Vue({
        el: '#app',
        Daten: {
            Zahl: 1
        },
        Methoden: {
            hinzufügen: Funktion () {
                diese.num++;
            }
        },
        aktualisiert: Funktion () {
            console.log("Methode im Konstruktor aktualisiert.")
        },
        Mixins: [addLog], //mixin})
</Skript>

Geben Sie hier die Bildbeschreibung ein

Sequentielle Zusammenfassung:全局混入> 局部混入> 構造器

Wenn zwei Objektschlüsselnamen in Konflikt stehen, nehmen Sie das Schlüssel-Wert-Paar des Komponentenobjekts

Wenn sowohl im Mixin als auch im Komponentenobjekt Testmethoden (mit demselben Namen) vorhanden sind, ist der endgültige Wert das Schlüssel-Wert-Paar des Komponentenobjekts.

  <div id="app">
      <p>Anzahl:{{ Anzahl }}</p>
      <P>
          <button @click="add">Menge hinzufügen</button>
      </P>
  </div>

  <Skript>
      var addLog = {
          aktualisiert: Funktion () {
              console.log("Die Daten ändern sich in " + this.num + ".");
              dies.test();
          },
          Methoden: {
              Test: Funktion () {
                  console.log('Test im Mixin')
              }
          }
      }

      var app = new Vue({
          el: '#app',
          Daten: {
              Zahl: 1
          },
          Methoden: {
              hinzufügen: Funktion () {
                  diese.num++;
              },
              test:funktion(){
                  console.log('Test im Komponentenobjekt')
              }
          },
          Mixins: [addLog], //mixin})
</Skript>

Geben Sie hier die Bildbeschreibung ein

Dies ist das Ende dieses Artikels über Vue.js-Mixins. Weitere Informationen zu Vue.js-Mixins 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!

Das könnte Sie auch interessieren:

Ein tiefer Einblick in Vue.js-Mixins
Detaillierte Erklärung der Vue.js-Mixins
So verwenden Sie Mixins in Vue.js

<<: Detaillierte Erläuterung des Implementierungsprozesses und der Verwendung des Linux-Papierkorbmechanismus

>>: Zusammenfassung der allgemeinen MySQL-Funktionen

Detaillierte Erläuterung der Lösung für verstümmelte Zeichen, wenn JDBC eine Verbindung zu MySQL herstellt, um Chinesisch zu verarbeiten

Artikel

Beispielanalyse von gespeicherten MySQL-Prozeduren, die Fehlerbedingungen in gespeicherten Prozeduren auslösen (SIGNAL- und RESIGNAL-Anweisungen)

Artikel

Detaillierte Erläuterung mehrerer Lösungen für JavaScript-Unterbrechungsanforderungen

Detaillierte Erklärung der Mixins in Vue.js

1. Grundlegende Verwendung von Mixins

2. Die Aufrufreihenfolge von Mixins

3. Globale Mixin-Methode

Wenn zwei Objektschlüsselnamen in Konflikt stehen, nehmen Sie das Schlüssel-Wert-Paar des Komponentenobjekts

Detaillierte Erläuterung der Lösung für verstümmelte Zeichen, wenn JDBC eine Verbindung zu MySQL herstellt, um Chinesisch zu verarbeiten

Beispielanalyse von gespeicherten MySQL-Prozeduren, die Fehlerbedingungen in gespeicherten Prozeduren auslösen (SIGNAL- und RESIGNAL-Anweisungen)

Detaillierte Erläuterung mehrerer Lösungen für JavaScript-Unterbrechungsanforderungen

Gegenseitiger Wertetransfer und Aufruf von Vue-Eltern-Kind-Komponenten

mysql8.0.23 msi Installation super ausführliches Tutorial

Implementierung des Imports und Exports von Vue-Element-Admin-Projekten

Keepalived+Nginx+Tomcat-Beispielcode zur Implementierung eines hochverfügbaren Webclusters

Implementierung einer coolen 3D-Würfeltransformationsanimation in CSS3

Rückblick auf die besten Webdesign-Arbeiten 2012 [Teil 1]

2 Methoden und Vorsichtsmaßnahmen zum Hinzufügen von Skripten in HTML

Artikel empfehlen

Detaillierte Erklärung der verschiedenen Verwendungen von proxy_pass in nginx

Einführung in die CSS-Stilklassifizierung (Grundkenntnisse)

Grafisches Tutorial zur kostenlosen Installationsversion von MySQL 5.7.17 winx64

So verwenden Sie die Concat-Funktion in MySQL

Mehrere Möglichkeiten zum Hinzufügen von Zeitstempeln in MySQL-Tabellen

Wie kann man dafür sorgen, dass Leerzeichen in IE und FF die gleiche Breite haben?

Natives JS zur Implementierung der Paging-Klicksteuerung

Detailliertes Tutorial zum Festlegen des Passworts für die kostenlose MySQL-Installationsversion

Ein kurzer Vortrag über berechnete Eigenschaften und das Abhören von Eigenschaften in Vue

Vue + Element dynamische Mehrfachheader und dynamische Slots

Details zum Vue Page Stack Manager

Erläuterung der HTTPS-Prinzipien

Zusammenfassung von 6 Methoden zur Anzeige von Linux-Protokollen

Detaillierte Erklärung von react setState

Fünf praktische Tipps zur Gestaltung von Webformularen