深入了解Vue.js 混入（mixins）
混入 (mixins)定義了一部分可復用的方法或者計算屬性?；烊雽ο罂梢园我饨M件選項。當組件使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。
來看一個簡單的實例：
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();
選項合并
當組件和混入對象含有同名選項時，這些選項將以恰當?shù)姆绞交旌稀?/p>
比如，數(shù)據(jù)對象在內(nèi)部會進行淺合并 (一層屬性深度)，在和組件的數(shù)據(jù)發(fā)生沖突時以組件數(shù)據(jù)優(yōu)先。
以下實例中，Vue 實例與混入對象包含了相同的方法。從輸出結果可以看出兩個選項合并了。
var mixin = {
created: function () {
document.write('混入調(diào)用' + '<br>')
}
}
new Vue({
mixins: [mixin],
created: function () {
document.write('組件調(diào)用' + '<br>')
}
});
輸出結果為：
混入調(diào)用
組件調(diào)用
如果 methods 選項中有相同的函數(shù)名，則 Vue 實例優(yōu)先級會較高。如下實例，Vue 實例與混入對象的 methods 選項都包含了相同的函數(shù)：
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：相同方法名
以上實例，我們調(diào)用了以下三個方法：
vm.hellworld();
vm.start();
vm.samemethod();
從輸出結果 methods 選項中如果碰到相同的函數(shù)名則 Vue 實例有更高的優(yōu)先級會執(zhí)行輸出。
全局混入
也可以全局注冊混入對象。注意使用！ 一旦使用全局混入對象，將會影響到 所有 之后創(chuàng)建的 Vue 實例。使用恰當時，可以為自定義對象注入處理邏輯。
// 為自定義的選項 'myOption' 注入一個處理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"
謹慎使用全局混入對象，因為會影響到每個單獨創(chuàng)建的 Vue 實例 (包括第三方模板)。
以上就是深入了解Vue.js 混入的詳細內(nèi)容，更多關于Vue.js 混入的資料請關注腳本之家其它相關文章！
相關文章
i18n是"國際化"的簡稱,它的主要目的是讓應用程序能夠適應不同的語言和地區(qū)的需求,下面就跟隨小編一起來看看Vue中i18n的具體使用方法吧2025-01-01
vue ElementUI的from表單實現(xiàn)登錄效果的示例
本文主要介紹了vue ElementUI的from表單實現(xiàn)登錄效果的示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
vue2項目使用element-ui的el-tabs組件導致瀏覽器崩潰卡死問題
這篇文章主要介紹了vue2項目使用element-ui的el-tabs組件導致瀏覽器崩潰卡死問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue3（vite）設置代理封裝axios api解耦,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了vue開發(fā)公共組件之返回頂部，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了vue 組件開發(fā)原理與實現(xiàn)方法,結合實例形式詳細分析了vue.js組件開發(fā)的原理與實現(xiàn)方法,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了Element PageHeader頁頭的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
下面小編就為大家分享一篇解決iview打包時UglifyJs報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要給大家介紹了關于vue中jsonp插件的使用方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)鼠標滑動展示tab欄切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04