minxin其實是一個對象,里面的結構大致跟普通組件的script里面的一樣睡汹,有data屬性帖旨,鉤子函數和方法等
混入 (mixins) 是一種分發(fā) Vue 組件中可復用功能的非常靈活的方式扇商《疽蹋混入對象可以包含任意組件選項。當組件使用混入對象時溶浴,所有混入對象的選項將被混入該組件本身的選項乍迄。
在實際項目中,可以新建一個js文件士败,導出一個minxin對象 在引用的組件中引入使用即可
這里例子就簡單的跟官網一樣幫助理解即可
選項合并
當組件和混入對象含有同名選項時闯两,這些選項將以恰當的方式混合。
比如谅将,數據對象在內部會進行淺合并 (一層屬性深度)漾狼,在和組件的數據發(fā)生沖突時以組件數據優(yōu)先。
var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})
同名鉤子函數將混合為一個數組饥臂,因此都將被調用逊躁。另外,混入對象的鉤子將在組件自身鉤子之前調用隅熙。
var mixin = {
created: function () {
console.log('混入對象的鉤子被調用')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('組件鉤子被調用')
}
})
// => "混入對象的鉤子被調用"
// => "組件鉤子被調用"
值為對象的選項稽煤,例如 methods, components 和 directives核芽,將被混合為同一個對象。兩個對象鍵名沖突時酵熙,取組件對象的鍵值對轧简。
var mixin = {
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"
注意:Vue.extend() 也使用同樣的策略進行合并。
也可以全局混入對象匾二,但是謹慎使用哮独!
OK啦!察藐!