VUE：混入 （mixins）选项的用法

在vue组件内，如果想将一些公共功能，如组件、方法、钩子函数等复用，混入是一个很好的选择。下面简单介绍一下混入的方式及特点。

首先来看看官方文档的介绍：

具体的说，你可以将一个对象作为混入的选项，在组件中复用。因为vue实例也是对象，所以你可以将vue实例作为混入选项传递进去。

组件中的mixins接收一个数组作为值。

以上代码将一个vue实例作为混入选项。

混入了一个方法，和两个同名的data数据，以及created函数。

接下来说一下混入的原则：

1、同名钩子函数将会合并成一个数组，都会调用，混入函数先调用

示意如上

2、data选项将会发生一层浅合并（参考原生的Object.assign()方法），属性冲突时以组件属性优先

混入的对象中也有msg属性，和原组件的msg属性冲突，所以msg为组件的dat的msg属性。组件内无form属性，混入了form属性之后也拥有form属性。

3、值为对象的选项，如methods，components，directives等，将会合并为一个新对象，如果键名冲突，组件的key对应的值优先

上图可以看出，在混入的方法内获取data的数据，结果是最终的msg(而非混入的对象的msg)。在两者都有exm方法时，调用的是组件内的exm方法，（这有别于同名钩子函数的调用方式）。

以上就是混入的用法及区别。

也可以将引入的vue对象写成简单的对象

export default {
  created(){
    console.log('这是混入的组件')
  },
  data() {
    return {
      msg: 'erwerwe',
      form:{
        a:'aaa'
      }
    }
  },
  methods:{
    clickFn(){
      console.log(this.msg)
    },
    exm(){
      console.log('这是混入的exm方法')
    }
  }
}

用法没有变化。

自定义混入的方法在此不坐介绍，有兴趣的同学可以去官方文档查看，

vuejs:混入