Vue.js
Mixins

Global Mixin

Du kan också använda en mixin globalt. Var försiktig! När du har använt en mixin globalt kommer det att påverka varje Vue-instans som skapas efteråt. När den används på rätt sätt kan detta användas för att injicera behandlingslogik för anpassade alternativ:

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

Använd globala mixins sparsamt och försiktigt, eftersom det påverkar varje enskild Vue-instans som skapas, inklusive komponenter från tredje part. I de flesta fall bör du bara använda den för anpassad tillvalshantering som visas i exemplet ovan.

Anpassade alternativ sammanslagningsstrategier

När anpassade alternativ slås samman använder de standardstrategin, som helt enkelt skriver över det befintliga värdet. Om du vill att ett anpassat alternativ ska slås samman med anpassad logik måste du bifoga en funktion till Vue.config.optionMergeStrategies :

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

För de flesta objektbaserade alternativ kan du helt enkelt använda samma strategi som används med methods :

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

Grunderna

Mixins är ett flexibelt sätt att distribuera återanvändbara funktioner för Vue-komponenter. Ett mixinobjekt kan innehålla valfri komponentalternativ. När en komponent använder en mixin "blandas" alla alternativ i komponentens egna alternativ.

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

Alternativ sammanslagning

När en mixin och själva komponenten innehåller överlappningsalternativ kommer de att "slås samman" med lämpliga strategier. Exempelvis slås krokfunktioner med samma namn samman i en matris så att alla kommer att kallas. Dessutom kommer mixingkrokar att anropas före komponentens egna krokar:

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"

Alternativ som förväntar sig objektvärden, till exempel methods , components och directives , kommer att slås samman till samma objekt. Komponentens alternativ kommer att ha prioritet när det finns motstridiga nycklar i dessa objekt:

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"

Observera att samma sammanslagningsstrategier används i Vue.extend() .