1. 混入概述
混入 (minxin) 提供了一種非常靈活的方式,來分發(fā) Vue 組件中的可復(fù)用功能。一個(gè)混入對象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對象時(shí),所有混入對象的選項(xiàng)將被 “混合” 進(jìn)入該組件本身的選項(xiàng)
// 定義一個(gè)混入對象
const myMixin = {
data() {
return {
name: "liang",
};
},
methods: {
sayHello() {
console.log("hello !");
},
},
};
// 定義一個(gè)使用混入對象的組件
export default {
mixins: [myMixin],
data() {
return {}
}
}
2. 選項(xiàng)合并
當(dāng)組件和混入對象含有同名選項(xiàng)時(shí),這些選項(xiàng)將 以恰當(dāng)?shù)姆绞竭M(jìn)行合并
數(shù)據(jù)對象 (data 選項(xiàng)) 在內(nèi)部會(huì)進(jìn)行遞歸合并,同名時(shí)以組件數(shù)據(jù)優(yōu)先,示例如下所示:
如果混入 myMixin, myMixin2 兩個(gè)對象,數(shù)據(jù)對象同名時(shí)優(yōu)先級(jí)為:組件數(shù)據(jù) > myMixin2 數(shù)據(jù) > myMixin 數(shù)據(jù)
mixins: [myMixin, myMixin2]
同名鉤子函數(shù)將合并為一個(gè)數(shù)組,都會(huì)被調(diào)用?;烊雽ο蟮你^子將在組件自身鉤子之前調(diào)用。
const mixin = {
created() {
console.log('混入對象的鉤子被調(diào)用')
}
}
new Vue({
mixins: [mixin],
created() {
console.log('組件鉤子被調(diào)用')
}
})
// => "混入對象的鉤子被調(diào)用"
// => "組件鉤子被調(diào)用"
對于值為對象的選項(xiàng),如:methods、components、directives,將合并為一個(gè)對象,鍵名同名時(shí)取組件對象的鍵值對
const mixin = {
methods: {
foo() {
console.log("混入對象的方法");
},
},
};
new Vue({
mixins: [mixin],
methods: {
foo() {
console.log("組件的方法");
},
},
});
vm.foo() // => "組件的方法"
3. 全局混入
uView 小程序分享 利用全局混入實(shí)現(xiàn)全局分享
混入也可以進(jìn)行全局注冊,使用時(shí)一定要格外小心 !一旦使用全局混入,將影響每一個(gè)之后創(chuàng)建的 Vue 實(shí)例
const mixin = {
methods: {
foo() {
console.log("混入對象的方法");
},
},
};
Vue.mixin(mixin);