Vue mixins 混入

混入是一种分发式组件可复用功能

分为混入对象 和使用混入对象的组件

// 定义一个混入对象
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!"

组件在created钩子执行时执行了myMixin里面的函数，说明混入对象已经成功混入组件中，合二为一了。

关键使用方法：

mixins: [myMixin]

注意事项

组件和混入对象含有同名选项
1.数据对象会在内部进行递归合并，如果由同名冲突以组件数据优先

`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" }
  }
})

可以看到created钩子函数输出的data包含message，foo, bar，其中冲突的message的值是罪行的‘goodbye’

2.同名钩子函数将混合成一个数组，都将被调用。混入对象钩子函数的优先级高于混入的组件的钩子函数

3.值为对象的选项，如methods，components,和directives，将被混合为同一个对象。如果对象键名冲突时，取组件对象的键值对