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();
選項合併
當元件和混入物件含有同名選項時，這些選項將以恰當的方式混合。
比如，資料物件在內部會進行淺合併 (一層屬性深度)，在和元件的資料發生衝突時以元件資料優先。
以下例項中，Vue 例項與混入物件包含了相同的方法。從輸出結果可以看出兩個選項合併了。
例項
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：相同方法名
以上例項，我們呼叫了以下三個方法：
vm.hellworld(); vm.start(); vm.samemethod();
從輸出結果 methods 選項中如果碰到相同的函式名則 Vue 例項有更高的優先順序會執行輸出。
全域性混入
也可以全域性註冊混入物件。注意使用！ 一旦使用全域性混入物件，將會影響到 所有 之後建立的 Vue 例項。使用恰當時，可以為自定義物件注入處理邏輯。
例項
// 為自定義的選項 'myOption' 注入一個處理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"
謹慎使用全域性混入物件，因為會影響到每個單獨建立的 Vue 例項 (包括第三方模板)。