Vue.js
Mixins

Mixin global

También puedes aplicar una mezcla globalmente. ¡Con precaución! Una vez que aplique una mezcla globalmente, afectará a cada instancia de Vue creada posteriormente. Cuando se usa correctamente, se puede usar para inyectar lógica de procesamiento para opciones personalizadas:

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

Utilice los mixins globales de forma dispersa y cuidadosa, ya que afecta a cada instancia de Vue creada, incluidos los componentes de terceros. En la mayoría de los casos, solo debe usarlo para el manejo de opciones personalizadas como se muestra en el ejemplo anterior.

Opción personalizada Combinar estrategias

Cuando las opciones personalizadas se combinan, utilizan la estrategia predeterminada, que simplemente sobrescribe el valor existente. Si desea que una opción personalizada se combine mediante la lógica personalizada, debe adjuntar una función a Vue.config.optionMergeStrategies :

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

Para la mayoría de las opciones basadas en objetos, simplemente puede usar la misma estrategia utilizada por los methods :

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

Lo esencial

Los mixins son una forma flexible de distribuir funcionalidades reutilizables para componentes de Vue. Un objeto mixin puede contener cualquier opción de componente. Cuando un componente usa una mezcla, todas las opciones en la mezcla se "mezclan" en las propias opciones del componente.

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

Opción de fusión

Cuando un mixin y el componente en sí contienen opciones superpuestas, se "fusionan" utilizando las estrategias apropiadas. Por ejemplo, las funciones de enganche con el mismo nombre se combinan en una matriz para que todas ellas sean llamadas. Además, los ganchos de mezcla se llamarán antes de los ganchos propios 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"

Las opciones que esperan valores de objetos, por ejemplo, methods , components y directives , se fusionarán en el mismo objeto. Las opciones del componente tendrán prioridad cuando haya claves en conflicto en estos objetos:

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"

Tenga en cuenta que las mismas estrategias de combinación se utilizan en Vue.extend() .