VUE mixins（混入）

mixins是在引入组件之后 将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并 相当于在引入后 父组件的各种属性方法都被扩充了。

单纯组件引用：

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

mixins：

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

 

意在重用其功能 我们会通过接口继承的方式来实现功能的复用 但是在javascript中 我们没办法通过接口继承的方式 但是我们可以通过javascript特有的原型链属性 将功能引用复制到原型链上 达到 功能的注入。

 

值得注意的是：

在使用mixins时 父组件和子组件同时拥有着子组件内的各种属性方法 但这并不意味着他们同时共享、同时处理这些变量，两者之间除了合并，是不会进行任何通信的。

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}
//调用
new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

请参考 官方文档