Vue 混入
混入 (mixins) 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式杯巨∮匙混入對(duì)象可以包含任意組件選項(xiàng)忍法。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被混入該組件本身的選項(xiàng)毅臊。
- 數(shù)據(jù)對(duì)象合并
數(shù)據(jù)對(duì)象在內(nèi)部會(huì)進(jìn)行淺合并 (一層屬性深度)理茎，在和組件的數(shù)據(jù)發(fā)生沖突時(shí)以組件數(shù)據(jù)優(yōu)先
var mixin = {
data() {
return {
msg_mixins: 'mixins',
msg: '123'
}
}
}
var app = new Vue({
mixins: [mixin],
el: '#app',
data: {
msg: 'app'
}
})
- 鉤子函數(shù)合并
同名鉤子函數(shù)將混合為一個(gè)數(shù)組，因此都將被調(diào)用。另外皂林，混入對(duì)象的鉤子將在組件自身鉤子之前調(diào)用朗鸠。
var mixin = {
data() {
return {
msg_mixins: 'mixins',
msg: '123'
}
},
created: function () {
console.log('混入對(duì)象的鉤子被調(diào)用')
}
}
var app = new Vue({
mixins: [mixin],
el: '#app',
data: {
msg: 'app'
},
created: function () {
console.log('組件鉤子被調(diào)用')
}
})
混入鉤子函數(shù).png
- methods, components 和 directives合并
methods, components 和 directives，將被混合為同一個(gè)對(duì)象式撼。兩個(gè)對(duì)象鍵名沖突時(shí)童社，取組件對(duì)象的鍵值對(duì)。
var mixin = {
data() {
return {
msg_mixins: 'mixins',
msg: '123'
}
},
created: function () {
console.log('混入對(duì)象的鉤子被調(diào)用')
},
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var app = new Vue({
mixins: [mixin],
el: '#app',
data: {
msg: 'app'
},
created: function () {
console.log('組件鉤子被調(diào)用')
},
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})
方法混合.png
- 全局混入
一旦使用全局混入對(duì)象著隆，將會(huì)影響到 所有 之后創(chuàng)建的 Vue 實(shí)例。
Vue.mixin({
created: function () {
console.log('全局混入')
}
})
全局混入.png
