Vue 中mixin混入机制

vue中提供了一种混合机制–mixins，用来更高效的实现组件内容的复用。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项中。

简单的说，组件在引用之后就相当于在父组件内开辟了一块单独的空间，然后根据父组件props过来的值进行相应的操作。而使用mixins机制的组件则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并，然后再执行渲染。即

单纯组件引用

父组件 + 子组件 >>> 父组件 + 子组件

mixins组件

 父组件 + 子组件 >>> new父组件

同时，使用mixins机制的组件，多个组件之间可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用。如果项目中有使用vue-router，那么组件将自动使用mixins机制。

下面是mixin的一个使用示例： 1，定义一个 js 文件(mixin.js)：

export default {
 data() {
  return {
   name: 'mixin'
  }
 },
 created() {
  console.log('mixin...', this.name);
 },
 mounted() {},
 methods: {}
}

2，然后在vue文件中使用mixin。

import '@/mixin'; // 引入mixin文件
export default {
 mixins: [mixin]
}

参考：Vue中使用mixins