Vue的混入mixins

 官方的定义如下：

---

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

---

其实，这已经很好理解了，就是用来扩展vue本身构建好的对象的，在vue这个大对象中，进行一个整合，一个对组件选项的组合。下边是官网给出的例子：

// 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

用法其实很简单，就是在myMixin大对象中，可以添加自己意愿添加的字段，比如说生命周期的created/mounted...或者是methods里边添加自己的方法，还比如说components等等都可以在对象中添加完成。

比如我们随意改造成如下：

var mixin = {
  data() {
    return {
      mixdata: 'I am mixins data'
    }
  },
  created() {
    this.foottt();
    console.log('this.mixdata', this.mixdata)
  },
  methods: {
    foottt: function (aaa) {
      console.log('tttfoottt', aaa)
    },
    conflictingttt: function () {
      console.log('ttt from mixin ttt')
    }
  }
}

控制台此时输出了：

tttfoottt undefined
this.mixdata I am mixins data