Vue.js
Mixins

Global Mixin

Sie können ein Mixin auch global anwenden. Vorsicht walten lassen! Wenn Sie ein Mixin global anwenden, wirkt sich dies auf jede später erstellte Vue-Instanz aus. Bei korrekter Verwendung kann dies verwendet werden, um Verarbeitungslogik für benutzerdefinierte Optionen einzufügen:

// inject a handler for `myOption` custom option
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// -> "hello!"

Verwenden Sie globale Mixins sparsam und sorgfältig, da sie sich auf jede einzelne Vue-Instanz auswirkt, einschließlich der Komponenten von Drittanbietern. In den meisten Fällen sollten Sie es nur für die Handhabung benutzerdefinierter Optionen verwenden, wie im obigen Beispiel gezeigt.

Zusammenführungsstrategien für benutzerdefinierte Optionen

Beim Zusammenführen von benutzerdefinierten Optionen wird die Standardstrategie verwendet, bei der der vorhandene Wert einfach überschrieben wird. Wenn Sie möchten, dass eine benutzerdefinierte Option mithilfe einer benutzerdefinierten Logik zusammengeführt wird, müssen Sie eine Funktion an Vue.config.optionMergeStrategies :

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // return mergedVal
}

Für die meisten objektbasierten Optionen können Sie einfach dieselbe Strategie verwenden, die von methods verwendet wird:

var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods

Grundlagen

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

// define a mixin object
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// define a component that uses this mixin
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // -> "hello from mixin!"

Option Zusammenführen

Wenn ein Mixin und die Komponente selbst überlappende Optionen enthalten, werden sie mit geeigneten Strategien "zusammengeführt". Beispielsweise werden Hook-Funktionen mit demselben Namen in einem Array zusammengeführt, sodass alle aufgerufen werden. Außerdem werden Mixin-Hooks vor den eigenen Hooks der Komponente aufgerufen:

var mixin = {
  created: function () {
    console.log('mixin hook called')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('component hook called')
  }
})

// -> "mixin hook called"
// -> "component hook called"

Optionen, die Objektwerte erwarten, z. B. methods , components und directives , werden in dasselbe Objekt eingefügt. Die Optionen der Komponente haben Vorrang, wenn sich in diesen Objekten widersprüchliche Schlüssel befinden:

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

vm.foo() // -> "foo"
vm.bar() // -> "bar"
vm.conflicting() // -> "from self"

Beachten Sie, dass in Vue.extend() die gleichen Zusammenführungsstrategien verwendet werden.