vue 混入 (mixin)

何为混入？

混入类似于“继承”，当前组件对象继承于组件对象，一般情况下遵循“就近原则”。但是与继承不同的是，继承一般都跟随着属性的重写与合并，混入在不同的配置项中，有着不同的混入策略。

为啥要用混入？

vue中的混入，可以在一定程度上提高代码的复用性。

开始使用

全局混入：

Vue.mixin({
  created: function () {
      console.log('混入进来了')
  }
})

局部混入：

var mixin = {
   created: function () {
      console.log('混入进来了')
  }
}
export default {
  mixins: [mixin]
}

混入策略

我们学会了混入，当然我们需要更好的控制混入的规则就需要学习混入策略

var mixin = {
    data() {
    return {
     myOption: '混入进来了'
  }
}

export default {
  mixins: [mixin],
  data() {
    return {
     myOption: '我是组件里面的'
  },
  created: function () {
      console.log(this.myOption) //  混入进来了
  }
}

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
    // 返回合并后的值
    return   toVal || fromVal  //当我们混入的值不为空则显示我们混入的值
}