Vue.jsミックスイン

ミックスイン(mixins)は、再利用可能なメソッドまたは計算されたプロパティの一部を定義します。 ミックスインオブジェクトには、任意のコンポーネントオプションを含むことができます。 コンポーネントがミックスインオブジェクトを使用する場合、ミックスインオブジェクトのすべてのオプションがコンポーネント自体のオプションにミックスインされます。

次には簡単な例をご覧ください。

例

var vm = new Vue({
	el: '#databinding',
	data: {
	},
	methods : {
	},
});
// ミックスインオブジェクトを定義する
var myMixin = {
	created: function () {
		this.startmixin()
	},
	methods: {
		startmixin: function () {
			document.write("ミックスインの例へようこそ");
		}
	}
};
var Component = Vue.extend({
	mixins: [myMixin]
})
var component = new Component();

オプションを混合する

コンポーネントとミックスインオブジェクトに同じ名前のオプションが含まれている場合、これらのオプションは適切な方法で混合されます。

例えば、データオブジェクトは内部で浅くマージされ（属性の深さは1層）、コンポーネントデータと衝突する場合はコンポーネントデータが優先されます。

次の例では、Vueインスタンスとミックスインオブジェクトに同じメソッドが含まれています。出力結果から、2つのオプションがマージされていることがわかります。

例

var mixin = { 
created: function () { 
document.write('ミックスインを呼び出し' + '<br>') 
} 
} 
new Vue({ 
mixins: [mixin], 
created: function () { 
document.write('コンポーネントを呼び出し' + '<br>') 
} 
});

出力結果：

ミックスインを呼び出し
コンポーネントを呼び出し

methodsオプションに同じ関数名がある場合、Vueインスタンスの優先度が高くなります。 次の例では、Vueインスタンスとミックスインオブジェクトのmethodsオプション両方に同じ関数が含まれています。

例

var mixin = {
	methods: {
		hellworld: function () {
			document.write('HelloWorld メソッド' + '<br>');
		},
		samemethod: function () {
			document.write('Mixin：同じメソッド名' + '<br>');
		}
	}
};
var vm = new Vue({
	mixins: [mixin],
	methods: {
		start: function () {
			document.write('start メソッド' + '<br>');
		},
		samemethod: function () {
			document.write('Main：同じメソッド名' + '<br>');
		}
	}
});
vm.hellworld();
vm.start();
vm.samemethod();

出力結果：

HelloWorld メソッド
start メソッド
'Main：同じメソッド名

上記の例では、次の3つのメソッドを呼び出しました。

vm.hellworld();
vm.start();
vm.samemethod();

出力結果のmethodsオプションで同じ関数名が検出された場合、Vueインスタンスの優先度が高くなって出力を実行します。

グローバルミックスイン

グローバルにミックスインを登録することもできます。使用に注意してください！一度、グローバルにミックスインを使用すると、その後に作成する全ての Vue インスタンスに影響します。適切に使用されると、カスタムオプションに対して処理ロジックを注入するることができます。

例

// カスタムオプション'myOption'にハンドラーを挿入する。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      document.write(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"

グローバルミックスインオブジェクトは、個別に作成されたすべてのVueインスタンス（サードパーティのテンプレートを含む）に影響するため、注意して使用してください。