接着前面的内容: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学习笔记(二十一)的更多相关文章

  1. python3.4学习笔记(二十一) python实现指定字符串补全空格、前面填充0的方法

    python3.4学习笔记(二十一) python实现指定字符串补全空格.前面填充0的方法 Python zfill()方法返回指定长度的字符串,原字符串右对齐,前面填充0.zfill()方法语法:s ...

  2. (C/C++学习笔记) 二十一. 异常处理

    二十一. 异常处理 ● 异常的概念 程序的错误通常包括:语法错误.逻辑错误.运行异常. 语法错误指书写的程序语句不合乎编译器的语法规则,这种错误在编译.连接时由编译器指出. 逻辑错误是指程序能顺利运行 ...

  3. Java基础学习笔记二十一 多线程

    多线程介绍 学习多线程之前,我们先要了解几个关于多线程有关的概念.进程:进程指正在运行的程序.确切的来说,当一个程序进入内存运行,即变成一个进程,进程是处于运行过程中的程序,并且具有一定独立功能. 线 ...

  4. 过滤器(web基础学习笔记二十一)

    一.过滤器简介 二.在Eclipse中创建过滤器 三.使用过滤器设置全部web字符编码 public void doFilter(ServletRequest request, ServletResp ...

  5. Java学习笔记二十一:Java面向对象的三大特性之继承

    Java面向对象的三大特性之继承 一:继承的概念: 继承是java面向对象编程技术的一块基石,因为它允许创建分等级层次的类. 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方 ...

  6. vue2.x学习笔记(十一)

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12586416.html. 表单的输入绑定 表单的输入绑定是一块很重要的内容,因为所有的业务系统都离不开基础表单的录 ...

  7. PHP学习笔记二十一【全局变量】

    <?PHP //定义全局变量 global $a; $a=9; //给全局变量赋值 function test1() { global $a; $a=45; } test1(); echo $a ...

  8. angular学习笔记(二十一)-$http.get

    基本语法: $http.get('url',{}).success(function(data,status,headers,config){}).error(function(data,status ...

  9. python cookbook第三版学习笔记二十一:利用装饰器强制函数上的类型检查

    在演示实际代码前,先说明我们的目标:能对函数参数类型进行断言,类似下面这样: @typeassert(int, int) ... def add(x, y): ...     return x + y ...

  10. vue2.0学习笔记之路由(二)路由嵌套+动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. [贪心]Codeforces Equal Rectangles

    Equal Rectangles time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  2. Magento2(麦进斗) docker 安装

    Magento 介绍 Magento(麦进斗)是一套专业开源的电子商务系统,采用php进行开发,使用Zend Framework框架.Magento设计得非常灵活,具有模块化架构体系和丰富的功能.易于 ...

  3. CF 631C report

    Each month Blake gets the report containing main economic indicators of the company "Blake Tech ...

  4. Hinton老爷子CapsNet再升级,结合无监督,接近当前最佳效果

    2017 年,Geoffrey Hinton 在论文<Dynamic Routing Between Capsules>中提出 CapsNet 引起了极大的关注,同时也提供了一个全新的研究 ...

  5. RabbitMQ AMQP 事务机制

    1,在之前的文章中介绍了RabbitMQ的五种队列形式 其中,在工作队列中,为了保证消费者的公平性,采用了channel.basicQos(1),保证了每次只发一条消息给消费者消费,并且使用手动签收的 ...

  6. 纯css实现图片或者页面变灰色

    前言 今天是个沉痛的日子,全国哀悼英雄,各大平台平日鲜丽的界面置纷纷换成了灰色,以表对逝者的安息与尊敬!!对付疫病,我没多大的本事,只能记录一点点知识来提升自己擅长的技术,待到将来能为国家尽一份绵薄之 ...

  7. iOS sign in with Apple 苹果ID登录

    http://www.cocoachina.com/articles/109104?filter=ios https://juejin.im/post/5deefc5e518825126416611d ...

  8. SQL实战(四)

    一. 题目描述 将employees表的所有员工的last_name和first_name拼接起来作为Name,中间以一个空格区分CREATE TABLE `employees` ( `emp_no` ...

  9. 别人家的 InfluxDB 实战 + 源码剖析

    1. 前几次的分享,我们多次提到了下图中 Metrics 指标监控的 Prometheus.Grafana,而且 get 到了 influxdata 旗下的 InfluxDB 的入门技能. 本次,我们 ...

  10. Mysql主从搭建(1)

    Master上授权从库: ```grant replication slave on *.* to slave1@ip identified by 'password';``` 逻辑备份: ```my ...