Vue.js mixins用法及代码示例

要混合到当前组件中的选项对象数组。

类型

interface ComponentOptions {
  mixins?: ComponentOptions[]
}

细节：

mixins 选项接受一个 mixin 对象数组。这些 mixin 对象可以像普通实例对象一样包含实例选项，并且它们将使用特定的选项合并逻辑与最终选项合并。例如，如果你的 mixin 包含一个 created 钩子并且组件本身也有一个，那么这两个函数都会被调用。

Mixin 钩子按照它们提供的顺序被调用，并且在组件自己的钩子之前被调用。

不再推荐

在 Vue 2 中，mixin 是创建可重用组件逻辑块的主要机制。虽然 Vue 3 继续支持 mixins，但Composition API 现在是组件之间代码重用的首选方法。

例子：

const mixin = {
  created() {
    console.log(1)
  }
}

createApp({
  created() {
    console.log(2)
  },
  mixins: [mixin]
})

// => 1
// => 2

相关用法

注：本文由纯净天空筛选整理自vuejs.org大神的英文原创作品 mixins。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。