Vue.config.optionMergeStrategies 用法分析

vue

举个例子,假设有个对象,他叫objA, 技能是说hello,他喜欢的女生叫小花,但是他是一个花心的人!

objA = {
name: 'objA ',
sayHello_ () {
console.log('hello')
},
love: '小花',
personality: '花心'
}
然后,又有一个对象,她叫objB, 技能是说world

objB = {
name: 'objB',
sayWorld () {
console.log('world')
}
}
然后现在想把objB 去 objA 家里玩!然后objA, 学会了objB的说world的技能,并且他爱上了objB,并且变得专一了。(而你就是定这个命运的人)

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 (http://www.my516.com) {
console.log(this.$options.name)
console.log(this.$options.love)
console.log(this.$options.personality)
},
...
}
</script>
B.js

export default {
name: 'objB'
}
当然,vue自身所有的option都有自己的合并策略,有兴趣的同学可以去读一读它的源码!

 
---------------------

以上是 Vue.config.optionMergeStrategies 用法分析 的全部内容, 来源链接: utcz.com/z/376217.html

回到顶部