Vue.js
Mixins

Mixin Global

Vous pouvez également appliquer un mixin globalement. Faites attention! Une fois que vous appliquez un mixin globalement, cela affecte toutes les instances de Vue créées ultérieurement. Utilisé correctement, il peut être utilisé pour injecter une logique de traitement pour les options personnalisées:

// 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!"

Utilisez les mixins globaux avec parcimonie et avec précaution, car cela affecte chaque instance de Vue créée, y compris les composants tiers. Dans la plupart des cas, vous ne devez l'utiliser que pour la gestion des options personnalisées, comme le montre l'exemple ci-dessus.

Stratégies de fusion d'options personnalisées

Lorsque les options personnalisées sont fusionnées, elles utilisent la stratégie par défaut, qui remplace simplement la valeur existante. Si vous souhaitez qu'une option personnalisée soit fusionnée à l'aide d'une logique personnalisée, vous devez associer une fonction à Vue.config.optionMergeStrategies :

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

Pour la plupart des options basées sur des objets, vous pouvez simplement utiliser la même stratégie utilisée par les methods :

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

Les bases

Les mixins constituent un moyen flexible de distribuer des fonctionnalités réutilisables pour les composants Vue. Un objet mixin peut contenir des options de composant. Lorsqu'un composant utilise un mixin, toutes les options du mixin seront mélangées dans les options du composant.

// 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 Fusion

Lorsqu'un mixin et le composant lui-même contiennent des options qui se chevauchent, ils seront «fusionnés» à l'aide de stratégies appropriées. Par exemple, les fonctions de hook avec le même nom sont fusionnées dans un tableau pour qu'elles soient toutes appelées. De plus, les hooks mixin seront appelés avant les propres crochets du composant:

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"

Les options qui attendent des valeurs d'objet, par exemple des methods , des components et des directives , seront fusionnées dans le même objet. Les options du composant auront la priorité lorsqu'il y a des clés en conflit dans ces objets:

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"

Notez que les mêmes stratégies de fusion sont utilisées dans Vue.extend() .