溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了什么是Vue.js 混入，內(nèi)容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
混入 (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 實例與混入對象包含了相同的方法。從輸出結(jié)果可以看出兩個選項合并了。
var mixin = {
created: function () {
document.write('混入調(diào)用' + '<br>')
}
}
new Vue({
mixins: [mixin],
created: function () {
document.write('組件調(diào)用' + '<br>')
}
});輸出結(jié)果為：
混入調(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();輸出結(jié)果為：
HelloWorld 方法
start 方法
Main：相同方法名
以上實例，我們調(diào)用了以下三個方法：
vm.hellworld();
vm.start();
vm.samemethod();
從輸出結(jié)果 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)容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
