vue mixin 与 自定义合并策略

全局mixin

全局的mixin影响到所有页面及组件的内容.

Vue.mixin({
  data() {
    return {
      name: "tgc"
    }
  },
  created() {
    console.log('这是全局mixin')
  },
  methods: {
    foo() {
      console.log('这是一个全局方法')
    }
  },
})

局部mixin

内容定义跟全局一样,在使用的时候在需要的组件\页面引入注册即可.

import mixin from "./mixin/mixin";
export default {
    mixins: [mixin],
    data() {
        return {};
    },
    created() {
        console.log(this.name);
        this.foo();
    },
    components: {
    }
};

合并策略

假如原来页面有一个name, mixin里面也有一个name你需要的是哪一个或者还是他们合并的问题, 默认使用最后定义的值, 即简单地覆盖已有值.

Vue.config.optionMergeStrategies.name = function (toVal, fromVal) {
  if (!toVal) return fromVal
  if (!fromVal) return toVal
  return fromVal + toVal
}

上面的代码指的name是页面的, 而非data 里面的. 如果需要判断data里面的取舍再添加策略就行.
如果两个参数的选取策略相同, 可使用如下方法:

var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods