Vue.js
ミックスイン

グローバルミックスイン

mixinをグローバルに適用することもできます。注意して！ 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使用されているものと同じ戦略を単純に使用できmethods 。

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

基本

ミックスインは、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()使用されていることに注意してください。