OneYoung

Appearance

在 Vue.js 中，mixins 是一种代码复用的方式。

它允许将组件中通用的逻辑抽离到一个独立的对象中，之后可以在多个组件中引用，从而减少代码重复。

当将 mixins 添加到组件时，Vue 会将 mixins 中的数据、方法、计算属性等合并到组件本身。

在合并过程中，Vue 遇到以下几种情况会有不同的处理方式：

  • 数据属性：若 mixins 和组件本身有同名的 data 属性，组件的属性优先。
  • 生命周期钩子：会混合在一起，所有同名钩子都会依次调用。
  • 方法或计算属性：若名称冲突，则组件中的定义会覆盖 mixins 中的定义。

11-1.mixins ​

js
// 定义一个 mixin
const myMixin = {
  data() {
    return {
      message: "Hello from mixin!"
    }
  },
  methods: {
    greet() {
      console.log(this.message)
    }
  }
}

// 在组件中使用 mixin
export default {
  mixins: [myMixin],
  mounted() {
    this.greet() // 输出 "Hello from mixin!"
  }
}

11-2.Object.assign ​

详见Object.assign