概念

mixin（混入），提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

Mixin 对象可以使用任何组件选项如 data、mounted、created 这些等，当组件使用 Mixin 时，Mixin 对象中的所有信息都将混合到组件中。

有两种混入方式：局部混入和全局混入。

下面就由我来介绍这两种混入方式的使用。

局部混入

定义 mixin.js 文件。

export default {
  data() {
    return {
      ...
    }
  },
  methods: {
    ...
  }
}

在需要使用的组件中引入。

import myMixin from "./mixin.js";
export default {
  mixins: [myMixin]
}

在 main.js 全局文件中定义。

Vue.mixin({
  created: function () {
    ...
  }
})

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行合并。

有如下几种情况：

数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先；
同名钩子函数将合并为一个数组，都将被调用。混入对象的钩子将在组件自身钩子之前调用；
值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。