Besprechen Sie die Anwendung von Mixin in Vue

Mixins bieten eine sehr flexible Möglichkeit, wiederverwendbare Funktionen auf Vue-Komponenten zu verteilen. Ein Mixin-Objekt kann beliebige Komponentenoptionen enthalten. Wenn eine Komponente ein Mixin verwendet, werden alle Optionen des Mixins in die eigenen Optionen der Komponente „gemischt“.

Das heißt, nachdem das Mixin in die Komponente eingeführt wurde, wird der Inhalt innerhalb der Komponente, wie Daten, Methoden und andere Attribute, mit dem entsprechenden Inhalt der übergeordneten Komponente zusammengeführt. Dies bedeutet, dass nach der Einführung alle Eigenschaftsmethoden der übergeordneten Komponente erweitert wurden.

Beispielsweise erfordert der Aufruf der Methode sayHi in zwei verschiedenen Komponenten eine wiederholte Definition. Wenn die Methode komplex ist, ist der Code redundanter, aber die Verwendung von Mixins ist relativ einfach.

Definieren Sie zunächst ein Mixin-Objekt in der Datei mixin.js:

lass mixin = {
  Daten () {
    zurückkehren {
      Benutzername: „mixin“
    }
  },
  erstellt () {
    dies.sayHello()
  },
  Methoden: {
    sagHallo() {
      console.log(`${this.userName}, willkommen`)
    }
  }
}

Standard-Mixin exportieren

Definieren Sie dann zwei Komponenten und führen Sie diese jeweils in die Komponenten ein:

<Skript>
    Mixin importieren von '../mixin'

    Standard exportieren {
      Mixins: [Mixin]
    }
</Skript>

Die Druckergebnisse beider Komponenten lauten dann:

Wenn der Benutzername in den beiden Komponentendaten definiert ist, bezieht sich das gedruckte Ergebnis auf den Benutzernamen in jeder Komponente.

Wenn die gleiche Methode wiederholt in den Methoden zweier Komponenten definiert ist, wird die Methode im Mixin überschrieben.

Definieren Sie Ihre eigenen Methoden „userName“ und „sayHi“ für eine der Komponenten:

<Skript>
    Mixin importieren von '../mixin'

    Standard exportieren {
      Mixins: [Mixin],
      Daten() {
        zurückkehren {
          Benutzername: "BComponent"
        }
      },
      erstellt () {
          dies.sayHello()
      },
      Methoden: {
        sagHallo() {
          console.log(`Hallo, ${this.userName}`)
        }
      }
    }
</Skript>

Drucken Sie dann das Ergebnis aus:

Dies ist ein bisschen so, als würde man eine öffentliche Vue-Methode registrieren, die in mehreren Komponenten verwendet werden kann. Ein weiterer Punkt ähnelt dem Registrieren von Methoden im Prototypobjekt und Sie können Methoden mit demselben Funktionsnamen definieren, um sie zu überschreiben.

Mixins können auch global registriert werden, werden jedoch im Allgemeinen nicht global verwendet, da sie die Vue-Instanz verschmutzen würden.

Normalerweise verwende ich dies in meinen Projekten. Wenn beispielsweise ein universeller Selektor in mehreren Komponenten verwendet wird, lauten die Optionen: Ja, Nein. Sie können Mixin verwenden, um einen einheitlichen Wörterbuchelementfilter hinzuzufügen, um das Echo der Optionen zu realisieren.

1. Erstellen Sie zunächst eine Dictionary.js-Datei, um die Bedeutung der Wörterbucheinträge zu speichern und anzuzeigen:

exportiere const COMMON_SELECT = [
    { Code: 0, Bezeichnung: 'Ja'},
    { Code: 1, Label: 'Nein'}
];

Hinweis: Die hier erstellte Datei Dictionary.js kann auch verwendet werden, um Optionen beim Rendern der Seite zu schleifen. Der spezifische Code lautet wie folgt:

importiere { COMMON_SELECT } aus '../constants/Dictionary.js'

Standard exportieren {
    Daten() {
        zurückkehren {
            comSelectOptions: COMMON_SELECT
        }
    }
}

<v-Modus auswählen="selStatus">
    <el-option v-for="Artikel in comSelectOptions" :key="Artikel.code" :label="Artikel.label" :value="Artikel.code"></el-option>
</Auswählen>

2. Erstellen Sie dann eine filter.js-Datei, um die benutzerdefinierte Filterfunktion zu speichern:

importiere { COMMON_SELECT } aus '../constants/Dictionary.js'

Standard exportieren {
  Filter:
    comSelectFilter: (Wert) => {
      const Ziel = COMMON_SELECT.filter(Element => {
        return item.code === Wert
      })
      Ziellänge zurückgeben? Ziel[0].Label : Wert
    }
  }
}

3. Zum Schluss führen wir die Filtermethode einmalig in main.js ein:

Filter aus „./mixin/filter“ importieren
Vue.mixin(Filter)

Oh, jetzt können wir es in jeder Komponente verwenden.

<Vorlage>
    <div>
        ....
        {{ status | comSelectFilter }}
        ....
    </div>  
</Vorlage>

Oben finden Sie eine ausführliche Diskussion über die Anwendung von Mixin in Vue. Weitere Informationen zur Anwendung von Mixin in Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!