uni-app x 使用 UTS 语言使用 mixins

雪芽蓝域zzs2026-04-21 9:44

1. uni-app x 使用 UTS 语言使用 mixins

在 uni-app x 中，使用 UTS 语言可以通过 defineMixin 函数或字面量对象的方式来定义和使用 mixins，与 JavaScript 中的使用方式类似，但需要注意 UTS 是强类型语言。

1.1. 基本用法

mixins 选项接受一个 mixin 对象数组，支持两种定义方式：

1.1.1. 方式一：使用 defineMixin 函数（推荐）

javascript 复制代码

const mixin1 = defineMixin({
  onLoad() {
    console.log('mixin1 onLoad')
  },
  data() {
    return {
      mixinProp: '来自 mixin 的数据'
    }
  }
})
export default {
  mixins: [mixin1],
  onLoad() {
    console.log('页面 onLoad')
  }
}

1.1.2. 使用字面量对象

javascript 复制代码

export default {
  mixins: [
    {
      data() {
        return {
          mixin2: 'mixin2'
        }
      },
      methods: {
        mixinMethod() {
          console.log('mixin 方法')
        }
      }
    }
  ]
}

1.2. 选项合并规则

（1）同名属性 ：会被覆盖，优先级从低到高为： app.mixin 内嵌 < app.mixin 声明 < page.mixin 内嵌 < page.mixin 声明 < component.mixin 内嵌 < component.mixin 声明。

（2）同名生命周期：会依次执行，执行顺序与上述优先级一致，先执行低优先级的 mixin，最后执行组件自身的生命周期。

1.3. 重要限制

在 app-android 平台有以下限制：

（1）App.uvue 不支持 mixins，全局 mixins 也不会对 App.uvue 生效

（2）不支持运行时根据条件动态构造 mixins

详细文档请参考：mixins - uni-app x 选项式 API