Vue.js
mixins

Mixin globale

Puoi anche applicare un mixin a livello globale. Fai attenzione! Una volta applicato un mixin a livello globale, questo influenzerà ogni istanza di Vue creata in seguito. Se utilizzato correttamente, può essere utilizzato per iniettare la logica di elaborazione per le opzioni personalizzate:

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

Utilizza i mixaggi globali con parsimonia e attenzione, poiché influisce su ogni singola istanza di Vue creata, compresi i componenti di terze parti. Nella maggior parte dei casi, dovresti usarlo solo per la gestione delle opzioni personalizzate come dimostrato nell'esempio sopra.

Strategie di fusione personalizzate

Quando le opzioni personalizzate vengono unite, utilizzano la strategia predefinita, che sovrascrive semplicemente il valore esistente. Se si desidera unire l'opzione personalizzata utilizzando la logica personalizzata, è necessario associare una funzione a Vue.config.optionMergeStrategies :

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

Per la maggior parte delle opzioni basate su oggetti, puoi semplicemente utilizzare la stessa strategia utilizzata dai methods :

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

Nozioni di base

I mix sono un modo flessibile per distribuire funzionalità riutilizzabili per i componenti Vue. Un oggetto mixin può contenere qualsiasi opzione di componente. Quando un componente usa un mixin, tutte le opzioni nel mixin saranno "mixate" nelle opzioni del componente stesso.

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

Opzione di unione

Quando un mixin e il componente stesso contengono opzioni sovrapposte, saranno "uniti" usando strategie appropriate. Ad esempio, le funzioni di hook con lo stesso nome vengono unite in una matrice in modo che vengano chiamate tutte. Inoltre, i hook di mixin verranno chiamati prima degli hook del componente:

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"

Le opzioni che prevedono valori di oggetto, ad esempio methods , components e directives , verranno unite nello stesso oggetto. Le opzioni del componente avranno la priorità quando ci sono chiavi in ​​conflitto in questi oggetti:

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"

Si noti che le stesse strategie di unione vengono utilizzate in Vue.extend() .