Vue.js
Примеси

Глобальный миксин

Вы также можете применить микс по всему миру. Соблюдайте осторожность! Как только вы примените mixin глобально, это повлияет на каждый экземпляр Vue, созданный впоследствии. При правильном использовании это можно использовать для ввода логики обработки для настраиваемых опций:

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

Используйте глобальные миксины редко и осторожно, потому что это влияет на каждый экземпляр Vue, включая сторонние компоненты. В большинстве случаев вы должны использовать его только для пользовательской обработки параметров, как показано в примере выше.

Стратегии слияния пользовательских опций

Когда пользовательские параметры объединяются, они используют стратегию по умолчанию, которая просто перезаписывает существующее значение. Если вы хотите, чтобы пользовательская опция была объединена с использованием пользовательской логики, вам необходимо прикрепить функцию к Vue.config.optionMergeStrategies :

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

Для большинства объектных параметров вы можете просто использовать ту же стратегию, которая используется methods :

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

основы

Mixins - это гибкий способ распространения возможностей повторного использования компонентов Vue. Объект mixin может содержать любые параметры компонента. Когда компонент использует mixin, все параметры в mixin будут «смешаны» с собственными параметрами компонента.

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

Вариант слияния

Когда mixin и сам компонент содержат перекрывающиеся опции, они будут «объединены» с использованием соответствующих стратегий. Например, функции перехвата с тем же именем объединяются в массив, чтобы все они вызывались. Кроме того, микшерные крючки будут вызываться перед собственными крючками компонента:

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"

Параметры, которые ожидают значения объектов, например methods , components и directives , будут объединены в один и тот же объект. Параметры компонента будут иметь приоритет, если в этих объектах имеются конфликтующие ключи:

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"

Обратите внимание, что те же стратегии слияния используются в Vue.extend() .