MorJS aComponent/wComponent Mixins 支持
小程序在 Component 的维度上支持的 mixins,使用 mixins 能够解耦业务可复用逻辑,因此 MorJS 在 Component 的维度上也同样支持 mixins 的机制,使用上基本与 Component 一致,提供 { mixins: [mixin1, mixin2] } 的 mixin 数组即可。有以下的注意点:
mixin必须是一个对象,里面是希望给aPage/wPage合并的各种属性data等Object类型的对象属性均会合并- 生命周期的钩子函数会合并依次执行,
aPage/wPage选项的生命周期最后执行 - 非
Object类型的属性(如:函数)会被同名的属性覆盖,aPage/wPage选项的属性优先级最高
import { aComponent } from '@morjs/core'
const mixinA = {
data: {
x: 1
},
didMount() {
console.log('mixina', 'didMount')
},
methods: {
foo() {
console.log('mixina', 'foo')
}
}
}
const mixinB = {
data: {
y: 2
},
didMount() {
console.log('mixinb', 'didMount')
},
methods: {
foo() {
console.log('mixinb', 'foo')
}
}
}
aComponent({
mixins: [mixinA, mixinB],
didMount() {
// 生命周期依次打印 mixina didMount -> mixinb didMount -> component didMount
console.log('component', 'didMount')
// 执行的是 mixinB 的 foo 方法
this.foo()
// { x: 1, y: 2, z: 3 } mixinA 和 mixinB 的 data 会合并
console.log(this.data)
}
})