Vue3 Mixins

Mixins definieren einen Teil wiederverwendbarer Methoden oder berechneter Eigenschaften. Ein Mixin-Objekt kann beliebige Komponentenoptionen enthalten. Wenn eine Komponente das Mixin-Objekt verwendet, werden alle Optionen des Mixin-Objekts in die eigenen Optionen der Komponente eingemischt.

Schauen wir uns ein einfaches Beispiel an:

Beispiel

//Ein Mixin-Objekt definieren const myMixin = { created() { this.hello() }, methods: { hello() { console.log('Willkommen beim Mixin-Beispiel - EXAMPLE!') } } } //Eine Anwendung definieren, die Mixins verwendet const app = Vue.createApp({ mixins: [myMixin] }) app.mount('#app') //=> "Willkommen beim Mixin-Beispiel - EXAMPLE!"

Selbst ausprobieren »

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 bei Konflikt mit Komponentendaten haben die Komponentendaten Vorrang.

Im folgenden Beispiel enthalten die Vue-Instanz und das Mixin-Objekt dieselbe Methode. Aus dem Ausgabeergebnis können wir ersehen, dass die beiden Optionen zusammengeführt werden.

Beispiel

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>VueTestbeispiel - Beispiel-Tutorial(example.com)</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id = "app"></div> <script type = "text/javascript"> const myMixin = { data() { return { message: 'hello', foo: 'example' } } } const app = Vue.createApp({ mixins: [myMixin], data() { return { message: 'goodbye', bar: 'def' } }, created() { document.write(JSON.stringify(this.$data)) } })

Das Ausgabeergebnis ist:

{"message":"goodbye","foo":"example","bar":"def"}

Selbst ausprobieren »

Hook-Funktionen mit demselben Namen werden zu einem Array zusammengeführt, sodass alle aufgerufen werden. Darüber hinaus werden die Hooks des Mixin-Objekts vor den eigenen Hooks der Komponente aufgerufen.

const myMixin = {
  created() {
    console.log('mixin 对象的钩子被调用')
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  created() {
    console.log('组件钩子被调用')
  }
})

// => "mixin 对象的钩子被调用"
// => "组件钩子被调用"

Optionen, deren Werte Objekte sind, wie z. B. Methoden, Komponenten und Direktiven, werden in dasselbe Objekt zusammengeführt. Wenn zwei Objekt-Schlüsselnamen kollidieren, wird das Schlüssel-Wert-Paar des Komponentenobjekts verwendet.

Beispiel

const myMixin = { methods: { foo() { console.log('foo') }, conflicting() { console.log('from mixin') } } } const app = Vue.createApp({ mixins: [myMixin], methods: { bar() { console.log('bar') }, conflicting() { console.log('from self') } } }) const vm = app.mount('#app') vm.foo() // => "foo" vm.bar() // => "bar" vm.conflicting() // => "from self"

Im obigen Beispiel haben wir die folgenden drei Methoden aufgerufen:

vm.foo();
vm.bar();
vm.conflicting();

Aus dem Ausgabeergebnis: In der Option methods hat die Vue-Instanz, wenn derselbe Funktionsname auftritt, eine höhere Priorität, und ihre Ausgabe wird ausgeführt.

Globales Mixin

Du kannst auch ein Mixin-Objekt global registrieren. Sei vorsichtig bei der 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.

Beispiel

const app = Vue.createApp({ myOption: 'hello!' }) //Füge einen Handler für die benutzerdefinierte Option 'myOption' ein. app.mixin({ created() { const myOption = this.$options.myOption if (myOption) { document.write(myOption) } } }) app.mount('#app') // => "hello!"

Selbst ausprobieren »

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

Andere Erweiterungen