Vue.config.optionMergeStrategies 参数讲解及使用、引用场景

Vue.config.optionMergeStrategies 是定义一个合并的策略

怎么说？

其实就是vue的  mixins属性。接收一个数组[ components ]，数组里是其他vue的实例。

比如你写了这个：

Vue.config.optionMergeStrategies.name = function (from, self) {
    return self.name ? self.name : from.name
}

那么 componets 合并进来的时候  就会遵循这个规则。 说白了就是两个对象的合并!

 

举个例子

objA = {
    name: 'objA ',
    sayHello_ () {
        console.log('hello')
    },
    love: '小花',
    personality: '花心'
}

 

objB = {
    name: 'objB',
    sayWorld () {
        console.log('world')
    }
}

 

然后现在想把objB 去 objA 家里玩！然后objA, 学会了objB的说world的技能

 

objA = {
    name: 'objA',
    sayHello_ () {
        console.log('hello')
    },
    sayWorld () {
        console.log('world')
    },
    love: 'objB',
    personality: '专一'
}

 

让objB 和 objA 合并，如果用到Vue实例上，就等同于我们写了这么一堆函数：(我们以【name, love, personality】举例吧！毕竟代码越少越好)

 

import Vue from 'vue'
 
Vue.config.optionMergeStrategies.name = function (from, self) {
    return self.name ? self.name : from.name
}
 
Vue.config.optionMergeStrategies.love = function (from, self) {
    return from.love ? from.love: self.love
}
 
Vue.config.optionMergeStrategies.personality = function (from, self) {
    return self.personality === '花心' ? '专一' : '花心'
}
 
 
new Vue({
    el: '#app',
    ...
})

 

组件A <script>
import B from './components/B.js'
 
export default {
    mixins: [B],
    name: 'objA',
    love: '小花',
    personality: '花心',
    created () {
        console.log(this.$options.name)
        console.log(this.$options.love)
        console.log(this.$options.personality)
    },
    ...
}
</script>

B.js
export default {
    name: 'objB'
}

 

就可以了 


最后说明  

Vue.config.optionMergeStrategies.metholds 参数讲解
  
Vue.config.optionMergeStrategies.metholds = (parent,child,that)=>{
        //第一个参数父  这里指的是 main.js 里面的Vue对象metholds
        //第二个参数指的是  子  这里指的是 mixin.js的metholds
        //指的是 当前的上下文 main.js
 
        if (!parent) {  //如果父中没有这个metholds属性,那么返回子的
            return child
        }
        if (!child) {  //如果子中没有设置metholds这个属性那么返回父的
            return parent
        }
 
        
        //策略如果混入中和当前vue实例中都有一个同名方法,那么加了该策略后,只能使用子的
        return Object.assign(parent,...child) //两个都有那么就合并后返回,子的会覆盖父的
  }
  需要要设置vue对象中的那个值 optionMergeStrategies后面就点什么(data,created,....)