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 ...
随机推荐
- [贪心]Codeforces Equal Rectangles
Equal Rectangles time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...
- Magento2(麦进斗) docker 安装
Magento 介绍 Magento(麦进斗)是一套专业开源的电子商务系统,采用php进行开发,使用Zend Framework框架.Magento设计得非常灵活,具有模块化架构体系和丰富的功能.易于 ...
- CF 631C report
Each month Blake gets the report containing main economic indicators of the company "Blake Tech ...
- Hinton老爷子CapsNet再升级,结合无监督,接近当前最佳效果
2017 年,Geoffrey Hinton 在论文<Dynamic Routing Between Capsules>中提出 CapsNet 引起了极大的关注,同时也提供了一个全新的研究 ...
- RabbitMQ AMQP 事务机制
1,在之前的文章中介绍了RabbitMQ的五种队列形式 其中,在工作队列中,为了保证消费者的公平性,采用了channel.basicQos(1),保证了每次只发一条消息给消费者消费,并且使用手动签收的 ...
- 纯css实现图片或者页面变灰色
前言 今天是个沉痛的日子,全国哀悼英雄,各大平台平日鲜丽的界面置纷纷换成了灰色,以表对逝者的安息与尊敬!!对付疫病,我没多大的本事,只能记录一点点知识来提升自己擅长的技术,待到将来能为国家尽一份绵薄之 ...
- iOS sign in with Apple 苹果ID登录
http://www.cocoachina.com/articles/109104?filter=ios https://juejin.im/post/5deefc5e518825126416611d ...
- SQL实战(四)
一. 题目描述 将employees表的所有员工的last_name和first_name拼接起来作为Name,中间以一个空格区分CREATE TABLE `employees` ( `emp_no` ...
- 别人家的 InfluxDB 实战 + 源码剖析
1. 前几次的分享,我们多次提到了下图中 Metrics 指标监控的 Prometheus.Grafana,而且 get 到了 influxdata 旗下的 InfluxDB 的入门技能. 本次,我们 ...
- Mysql主从搭建(1)
Master上授权从库: ```grant replication slave on *.* to slave1@ip identified by 'password';``` 逻辑备份: ```my ...