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 例項 (包括第三方模板)。