Mixin混合，混入

在vue项目中，有可能会出现多个组件具有 同样的结构 的情况

什么是“同样的结构”

• 同样内容的变量声明，方法声明，甚至是生命周期函数，甚至是同样的值，都可以视作“同样的结构” 形如

例1

其中，c1组件和c2组件都包含了 数据data1，data2，以及方法 func1() 计算属性 comp1()，显然现在的代码很冗余，但是可以 通过Mixin来进行简化

Mixin能做什么

Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。

简单来说，就是声明一些mixin 对象 ，它包含了某些可复用的组件选项（如data，methods，computed等），在组件中引入某个mixin对象并且使用它，可以把mixin中的声明的 组件结构 与组件 原本的内容 相 结合 ，实现方法，属性等的复用

Mixin具体怎么使用

1. 首先在src目录下创建一个mixin文件夹，在文件夹中创建index.js

2. 在index.js中，创建需要导出的mixin对象，以上述的例一 为例，创建在c1，c2两个组件中都出现了的数据(data1,data2) 方法(func1) 计算属性(comp1)，以及一个声明周期方法created

//定义并且按需导出一个mixin对象
//它与你在组件中书写export default {}部分是类似的
export const mix1 = {
  data() {
    return {
      data1:"",
      data2:""
    }
  },
  methods: {
    func1(){}
  },
  computed: {
    comp1(){}
  },
  created(){
    console.log("use mixin's created");  
  }
}

3. 在需要用到mixin对象的组件中， 导入 mixin对象，并且 以数组的形式声明 要使用的mixin对象

//按需导入需要用到mixin对象
import {mix1} from "../mixin"
//c1组件
export default {
  data(){
    return {
      c2:"",
    }
  },
  methods: {
    c2(){},
  },
  //以数组的形式声明要使用的mixin对象
  mixins: [mix1],
  mounted() {
    console.log(this);
  }
}

4. 来验证一下mixin是否生效了，如在上述代码mounted中输出当前vue实例

使用之前

使用之后

可以看到原本不存在的comp1，data1等，现在都被创建了 说明输出的对象成功混入/混合了 mixin中声明的组件选项

Mixin的一些特性，使用注意点

• 如果mixin中声明的组件选项 和 组件中原有的组件选项 重复（可以是方法名重复，属性名重复）,那么优先应用组件原有的组件选项
• 注意，如果是mixin中和 组件中 都声明了 钩子函数 那么，它们都会执行

//组件中声明了data1 
data(){
    return {
      data1: "im c1's data1"
    }
},
//mixin对象中声明了data1
data() {
    return {
      data1:"mixin data1",
    }
},

结果

\