MorJS aComponent/wComponent Mixins 支持

2024-01-15 17:38 更新

小程序在 Component 的維度上支持的 mixins,使用 mixins 能夠解耦業(yè)務(wù)可復(fù)用邏輯,因此 MorJS 在 Component 的維度上也同樣支持 mixins 的機(jī)制,使用上基本與 Component 一致,提供 { mixins: [mixin1, mixin2] }mixin 數(shù)組即可。有以下的注意點(diǎn):

  • mixin 必須是一個(gè)對(duì)象,里面是希望給 aPage / wPage 合并的各種屬性
  • dataObject 類型的對(duì)象屬性均會(huì)合并
  • 生命周期的鉤子函數(shù)會(huì)合并依次執(zhí)行,aPage / wPage 選項(xiàng)的生命周期最后執(zhí)行
  • Object 類型的屬性(如:函數(shù))會(huì)被同名的屬性覆蓋,aPage / wPage 選項(xiàng)的屬性優(yōu)先級(jí)最高
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')
    // 執(zhí)行的是 mixinB 的 foo 方法
    this.foo()
    // { x: 1, y: 2, z: 3 } mixinA 和 mixinB 的 data 會(huì)合并
    console.log(this.data)
  }
})


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)