vue2.x学习笔记(二十一)
接着前面的内容:https://www.cnblogs.com/yanggb/p/12632730.html。
可复用性&结合-混入
基础
混入(mixin)提供了一种非常灵活的方式,来分发vue组件中的可复用功能。一个混入对象可以包含任意的组件选项。当组件使用混入对象的时候,所有的混入对象的选项都将被混合进入该组件本身的选项。
// 定义一个混入对象
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
} // 定义一个使用混入对象的组件
var Component = Vue.extend({
mixins: [myMixin]
}) var component = new Component() // => "hello from mixin!"
这里使用的是【Vue.extend】配合【mixins】选项将一个预定义好的混入对象(组件选项)混入组件本身的选项中。
选项合并
当组件和混入对象含有相同名称的选项的时候,这些选项将会以恰当的方式进行合并。
比如,数据对象在内部会进行递归合并,并在发生冲突的时候以组件数据优先。
var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
} new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})
不同于数据对象,同名的钩子函数将会被合并为一个数组,因此都将会被调用。另外,混入对象的钩子将在组件自身钩子之前调用。
var mixin = {
created: function () {
console.log('混入对象的钩子被调用')
}
} new Vue({
mixins: [mixin],
created: function () {
console.log('组件钩子被调用')
}
}) // "混入对象的钩子被调用"
// "组件钩子被调用"
而值为对象的选项,例如methods、components和directives,则会被合并为同一个对象。两个对象的键名冲突的时候,取组件对象的键值对(组件优先机制)。
var mixin = {
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
} var vm = new Vue({
mixins: [mixin],
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
}) vm.foo() // "foo"
vm.bar() // "bar"
vm.conflicting() // "from self"
另外注意,【Vue.extend()】也是使用同样的策略进行合并的。
全局混入
混入也可以进行全局注册。但是使用要格外小心,因为一旦使用了全局混入,它将会影响每一个之后创建的vue实例。使用恰当的时候,这可以用来为自定义选项注入处理逻辑。
// 为自定义的选项myOption注入一个处理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
}) new Vue({
myOption: 'hello!'
})
// "hello!"
请谨慎使用全局混入,因为它会影响每个单独创建的vue实例(包括第三方组件)。大多数情况下,只应当应用于自定义选项,就像上面的示例一样。推荐将其作为插件发布,以避免重复的应用混入。
自定义选项合并策略
自定义选项将使用默认策略,即简单地覆盖已有的值。如果想要让自定义选项以自定义的逻辑合并的话,可以向【Vue.config.optionMergeStrategies】添加一个函数:
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// 返回合并后的值
}
而对于多数值为对象的选项,则可以使用与methods相同的合并策略:
var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods
另外还可以在vuex 1.x的混入策略里找到一个更高级的例子:
const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) {
if (!toVal) return fromVal
if (!fromVal) return toVal
return {
getters: merge(toVal.getters, fromVal.getters),
state: merge(toVal.state, fromVal.state),
actions: merge(toVal.actions, fromVal.actions)
}
}
在普通的业务开发里混入用得比较少,而如果是构建框架的话用得应该是比较多的。
“我还是很喜欢你,像这般矫情语句,有韵无律。”
vue2.x学习笔记(二十一)的更多相关文章
- python3.4学习笔记(二十一) python实现指定字符串补全空格、前面填充0的方法
python3.4学习笔记(二十一) python实现指定字符串补全空格.前面填充0的方法 Python zfill()方法返回指定长度的字符串,原字符串右对齐,前面填充0.zfill()方法语法:s ...
- (C/C++学习笔记) 二十一. 异常处理
二十一. 异常处理 ● 异常的概念 程序的错误通常包括:语法错误.逻辑错误.运行异常. 语法错误指书写的程序语句不合乎编译器的语法规则,这种错误在编译.连接时由编译器指出. 逻辑错误是指程序能顺利运行 ...
- Java基础学习笔记二十一 多线程
多线程介绍 学习多线程之前,我们先要了解几个关于多线程有关的概念.进程:进程指正在运行的程序.确切的来说,当一个程序进入内存运行,即变成一个进程,进程是处于运行过程中的程序,并且具有一定独立功能. 线 ...
- 过滤器(web基础学习笔记二十一)
一.过滤器简介 二.在Eclipse中创建过滤器 三.使用过滤器设置全部web字符编码 public void doFilter(ServletRequest request, ServletResp ...
- Java学习笔记二十一:Java面向对象的三大特性之继承
Java面向对象的三大特性之继承 一:继承的概念: 继承是java面向对象编程技术的一块基石,因为它允许创建分等级层次的类. 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方 ...
- vue2.x学习笔记(十一)
接着前面的内容:https://www.cnblogs.com/yanggb/p/12586416.html. 表单的输入绑定 表单的输入绑定是一块很重要的内容,因为所有的业务系统都离不开基础表单的录 ...
- PHP学习笔记二十一【全局变量】
<?PHP //定义全局变量 global $a; $a=9; //给全局变量赋值 function test1() { global $a; $a=45; } test1(); echo $a ...
- angular学习笔记(二十一)-$http.get
基本语法: $http.get('url',{}).success(function(data,status,headers,config){}).error(function(data,status ...
- python cookbook第三版学习笔记二十一:利用装饰器强制函数上的类型检查
在演示实际代码前,先说明我们的目标:能对函数参数类型进行断言,类似下面这样: @typeassert(int, int) ... def add(x, y): ... return x + y ...
- vue2.0学习笔记之路由(二)路由嵌套+动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- c++源文件从文本阶段到可执行文件的过程
过程分为四个阶段: 预处理阶段····>编译阶段····>汇编阶段····>链接阶段 1)预处理阶段:对源代码文件中的文件包含关系.预编译语句(宏定义)进行分析和替换,生成预编译文件 ...
- npm git 常用命令行 记录
1. 推出node命令行: 两次ctrl+C或者一次ctrl+D 退出终端:exit; 2.npm 常用 npm install <name> 安装包 npm install &l ...
- 知识图谱与机器学习 | KG入门 -- Part1-b 图深度学习
介绍 我们正在定义一种新的机器学习方法,专注于一种新的范式 -- Data Fabric. 在上一篇文章中,我们对机器学习给出了新的定义: 机器学习是一种自动发现Data Fabric中隐藏的&quo ...
- VRRP协议:Virtual Route
VRRP协议:Virtual Route Redundancy Protocol虚拟路由冗余协议.是一种容错协议,保证当主机的下一跳路由出现故障时,由另一台路由器来代替出现故障的路由器进行工作,从而 ...
- python学习第二节 数据类型、字符编码、文件处理
标准数据类型 Python3 中有六个标准的数据类型: Number(数字) String(字符串) List(列表) Tuple(元组) Sets(集合) Dictionary(字典) 数字 #整型 ...
- Vertica的这些事(二)——SQL-Server、Oracle、MySQL和Vertica数据库常用函数对比
SQL Server.Oracle.MySQL和Vertica数据库常用函数对比 Vertica数据库是HP公司新收购的用于BI方面的数据库. 绝对值 S:select abs(-1) value O ...
- 《Three.js 入门指南》3.1.1 - 基本几何形状-立方体(CubeGeometry)
3.1 基本几何形状 立方体(CubeGeometry) 构造函数: THREE.CubeGeometry(width, height, depth, widthSegments, heightSeg ...
- 《Three.js 入门指南》2- 照相机
2.1 什么是照相机 我们使用Three.js创建的场景是三维的,而通常情况下显示屏是二维的,那么三维的场景如何显示到二维的显示屏上呢?照相机就是这样一个抽象,它定义了三维空间到二维屏幕的投影方式,用 ...
- PTA数据结构与算法题目集(中文) 7-20
PTA数据结构与算法题目集(中文) 7-20 7-20 表达式转换 (25 分) 算术表达式有前缀表示法.中缀表示法和后缀表示法等形式.日常使用的算术表达式是采用中缀表示法,即二元运算符位于两个 ...
- codeblocks 的安装与初体验
下载 链接 安装 点击默认安装即可! 配置 自带编译器还报错!! 大多数自带编译器的codeblocks安装后无法找到编译器的解决方案 点击Settings->Compiler,找到Toolc ...