Vue.js
mixins

Wereldwijde mixin

Je kunt ook een mixin wereldwijd toepassen. Wees voorzichtig! Als je een mixin wereldwijd toepast, heeft dit invloed op elke Vue-instantie die daarna wordt gemaakt. Bij correct gebruik kan dit worden gebruikt om verwerkingslogica te injecteren voor aangepaste opties:

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

Gebruik mondiale mixins spaarzaam en zorgvuldig, omdat dit elke gemaakte Vue-instantie beïnvloedt, inclusief componenten van derden. In de meeste gevallen dient u het alleen te gebruiken voor het verwerken van aangepaste opties, zoals in het bovenstaande voorbeeld is aangetoond.

Aangepaste optie strategieën samenvoegen

Wanneer aangepaste opties worden samengevoegd, gebruiken ze de standaardstrategie, die eenvoudigweg de bestaande waarde overschrijft. Als u een aangepaste optie wilt samenvoegen met behulp van aangepaste logica, moet u een functie koppelen aan Vue.config.optionMergeStrategies :

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

Voor de meeste objectgebaseerde opties kunt u eenvoudigweg dezelfde strategie gebruiken die door methods :

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

Basics

Mixins zijn een flexibele manier om herbruikbare functionaliteiten voor Vue-componenten te distribueren. Een mixin-object kan alle componentopties bevatten. Wanneer een component een mixin gebruikt, worden alle opties in de mixin "gemengd" in de eigen opties van de component.

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

Optie samenvoegen

Wanneer een mixin en de component zelf overlappende opties bevatten, zullen ze worden "samengevoegd" met behulp van geschikte strategieën. Haakfuncties met dezelfde naam worden bijvoorbeeld samengevoegd in een array zodat ze allemaal worden aangeroepen. Bovendien worden mixin-hooks aangeroepen vóór de eigen hooks van de component:

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"

Opties die objectwaarden verwachten, bijvoorbeeld methods , components en directives , worden samengevoegd in hetzelfde object. De opties van de component hebben voorrang wanneer er conflicterende sleutels zijn in deze objecten:

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"

Merk op dat dezelfde samenvoegstrategieën worden gebruikt in Vue.extend() .