Vue.js
Mixiny

Global Mixin

Możesz także zastosować mixin na całym świecie. Zachowaj ostrożność! Kiedy zastosujesz mixin globalnie, wpłynie to na każdą instancję Vue utworzoną później. Przy prawidłowym użyciu można tego użyć do wstrzyknięcia logiki przetwarzania niestandardowych opcji:

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

Globalnych miksów używaj rzadko i ostrożnie, ponieważ wpływa to na każdą utworzoną instancję Vue, w tym na komponenty innych firm. W większości przypadków należy go używać tylko do niestandardowej obsługi opcji, jak pokazano w powyższym przykładzie.

Niestandardowe strategie scalania opcji

Po scaleniu opcji niestandardowych używają domyślnej strategii, która po prostu zastępuje istniejącą wartość. Jeśli chcesz Vue.config.optionMergeStrategies niestandardową opcję za pomocą niestandardowej logiki, musisz dołączyć funkcję do Vue.config.optionMergeStrategies :

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

W przypadku większości opcji obiektowych możesz po prostu użyć tej samej strategii, której używają methods :

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

Podstawy

Mixiny to elastyczny sposób dystrybucji funkcji wielokrotnego użytku dla komponentów Vue. Obiekt mixin może zawierać dowolne opcje komponentu. Kiedy komponent używa miksu, wszystkie opcje w miksie zostaną „zmiksowane” z własnymi opcjami komponentu.

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

Opcja Scalanie

Kiedy mixin i sam komponent zawierają nakładające się opcje, zostaną one „scalone” przy użyciu odpowiednich strategii. Na przykład funkcje przechwytujące o tej samej nazwie są scalane w tablicę, aby wszystkie były wywoływane. Ponadto haczyki mixin będą wywoływane przed własnymi hakami komponentu:

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"

Opcje, które oczekują wartości obiektu, na przykład methods , components i directives , zostaną scalone w ten sam obiekt. Opcje komponentu będą miały pierwszeństwo, gdy w tych obiektach znajdują się klucze będące w konflikcie:

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"

Zauważ, że te same strategie scalania są używane w Vue.extend() .