Vue.config.optionMergeStrategies 用法分析
举个例子,假设有个对象,他叫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 用法分析的更多相关文章
- Vue.js 源码分析(二十五) 高级应用 插槽 详解
我们定义一个组件的时候,可以在组件的某个节点内预留一个位置,当父组件调用该组件的时候可以指定该位置具体的内容,这就是插槽的用法,子组件模板可以通过slot标签(插槽)规定对应的内容放置在哪里,比如: ...
- Vue.js 源码分析(二十二) 指令篇 v-model指令详解
Vue.js提供了v-model指令用于双向数据绑定,比如在输入框上使用时,输入的内容会事实映射到绑定的数据上,绑定的数据又可以显示在页面里,数据显示的过程是自动完成的. v-model本质上不过是语 ...
- Vue.js 源码分析(二) 基础篇 全局配置
Vue.config是一个对象,包含Vue的全局配置,可以在启动应用之前修改下列属性,如下: ptionMergeStrategies ;自定义合并策略的选项silent ...
- 【Vue学习笔记1】全局配置 Vue.config
1.slient 类型:boolean: 默认:false: 用法:Vue.config.silent = true 用于取消 Vue 所有的日志与警告
- 浅谈Spring框架注解的用法分析
原文出处: locality 1.@Component是Spring定义的一个通用注解,可以注解任何bean. 2.@Scope定义bean的作用域,其默认作用域是”singleton”,除此之外还有 ...
- Vue.js 源码分析(三十一) 高级应用 keep-alive 组件 详解
当使用is特性切换不同的组件时,每次都会重新生成组件Vue实例并生成对应的VNode进行渲染,这样是比较花费性能的,而且切换重新显示时数据又会初始化,例如: <!DOCTYPE html> ...
- Vue.js 源码分析(三十) 高级应用 函数式组件 详解
函数式组件比较特殊,也非常的灵活,它可以根据传入该组件的内容动态的渲染成任意想要的节点,在一些比较复杂的高级组件里用到,比如Vue-router里的<router-view>组件就是一个函 ...
- Vue.js 源码分析(二十九) 高级应用 transition-group组件 详解
对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件. transition-group组件的props和transition组件类似,不同点是transition-gr ...
- Vue.js 源码分析(二十八) 高级应用 transition组件 详解
transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...
随机推荐
- LOJ 3092 「BJOI2019」排兵布阵 ——DP
题目:https://loj.ac/problem/3092 同一个人的不同城堡之间没有什么联系,只是和<=m.所以对每个城堡的 s 个值排序,做一个 f[ i ][ j ] 表示第 i 个城堡 ...
- 31 July
P1005 矩阵取数游戏 高精度不能更坑-- #include <cstdio> #include <cstring> struct INT { long long h, l; ...
- (转)使用InfluxDB+cAdvisor+Grafana配置Docker监控
文档来源 文档来源:How to setup Docker Monitoring 由garyond翻译.校正及整理 Docker监控简介 我们提供的Docker主机和容器越来越多,对Docker服务器 ...
- SVG开发包, 20 个有用的 SVG 工具,提供更好的图像处理
20 个有用的 SVG 工具,提供更好的图像处理 SVG 现正在 Web 设计领域变得越发流行, 你可以使用 Illustrator 或者 Inkscape 来创建 SVG 图像. 但当进行 Web ...
- 【转】 Linux 的目录详解 (Linux基础一)
前言 转自: http://c.biancheng.net/view/2833.html 进行了一些提炼和修改. 学习 Linux,不仅限于学习各种命令,了解整个 Linux 文件系统的目录结构以及各 ...
- 107、TensorFlow变量(三)
创建秩为1的张量 # create a rank1 tensor object import tensorflow as tf mystr = tf.Variable(["Hello&quo ...
- JDK 与 JRE
JDK就是Java Development Kit.简单的说JDK是面向开发人员使用的SDK,它提供了Java的开发环境和运行环境.SDK是Software Development Kit 一般指软件 ...
- 字符串模式匹配算法系列(一):BF算法
算法背景: BF(Brute Force)算法,是一种在字符串匹配的算法中,比较符合人类自然思维方式的方法,即对源字符串和目标字符串逐个字符地进行比较,直到在源字符串中找到完全与目标字符串匹配的子字符 ...
- 洛谷 P1972 [SDOI2009]HH的项链——树状数组
先上一波题目 https://www.luogu.org/problem/P1972 这道题是询问区间内不同数的个数 明显不是正常的数据结构能够维护的 首先考虑 因为对于若干个询问的区间[l,r],如 ...
- 不要62(数位dp)
题目传送门 不要62 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...