前面的话

  本文将详细介绍Vue混合mixins

概述

  混合 (mixins) 是一种分发 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!"

选项合并

  当组件和混合对象含有同名选项时,这些选项将以恰当的方式混合。比如,同名钩子函数将混合为一个数组,因此都将被调用。另外,混合对象的钩子将在组件自身钩子之前调用 :

var mixin = {
created: function () {
console.log('混合对象的钩子被调用')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('组件钩子被调用')
}
})
// -> "混合对象的钩子被调用"
// -> "组件钩子被调用"

  值为对象的选项,例如 methods, componentsdirectives,将被混合为同一个对象。 两个对象键名冲突时,取组件对象的键值对

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) {
// return mergedVal
}

  对于大多数对象选项,可以使用 methods 的合并策略:

var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods

Vue混合mixins的更多相关文章

  1. vue的混合mixins学习

    mixins   混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.   混合对象可以包含任意组件选项.   当组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选 ...

  2. vue从入门到进阶:自定义指令directive,插件的封装以及混合mixins(七)

    一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...

  3. Vue混合

    gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson13 一 定位 混合以一种灵活的方式为组件提供分布复用功能.混合对象 ...

  4. Vue 混入(mixins)

    详细参考官方文档 基础 混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. ...

  5. Vue 混合

    混合(mixins)是一种分发vue组件中可复用功能的非常灵活的方式.混合对象可以可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选项将被混合到该组件本身的选项. //定义一个混合对象 va ...

  6. vue中mixins的理解及应用

    vue中mixins的理解及应用 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情 ...

  7. vue中mixins的使用方法和注意点(详)

    mixins基础概况 vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~ 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使 ...

  8. SASS详解之混合(mixins)

    SASS详解之混合(mixins)可以出现在SASS的任何地方.有很多类名具有相同或者相似的样式,就可以用SASS中的混合(mixins)来进行编写,然后针对不同类名的不同样式逐一编写. 定义一个混合 ...

  9. Vue中的“混合”——mixins使用方法

    混合是一种灵活的分布式复用 Vue 组件的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项.当组件和混合对象含有同名选项时,这些选项将以恰当的方式混 ...

随机推荐

  1. 图片完全填充CardView区域

    在Android开发中,使用CardView来显示我们需要展示的图片,但是有时候显示出来的图片并没有填充整个CardView区域,为了让需要展示的图片填充整个CardView区域,只需要在ImageV ...

  2. mysql 性能优化思路 - mysqldumpslow /tmp/mysql-slow.log 字符集 utf-8 create database

    提高MySQL服务的性能,响应速度: 1.替换有问题的硬件:内存,CPU,磁盘 2.服务的配置参数的配置 3.SQL的优化 .服务参数的配置: 1.1 连接数,连接超时: max_connection ...

  3. 01-认识Jenkins

    1.1 Jenkins是什么? Jenkins官网: http://jenkins.io/ .Jenkins前身是Hudson,使用java语言开发的自动化发布工具.在中大型金融等企业中普遍使用Jen ...

  4. sublime text3 的汉化

    仅是记录自己的处理过程,以防遗忘: 感谢作者:https://www.jianshu.com/p/ecc241f22ed5

  5. Nginx+keepalived高可用配置实战(内附彩蛋)

    1.整体架构图如下 2.环境准备 今天所配置的是keepalived+nginx 的负载均衡 下载keepalived软件 [root@LB01 tools]# wget http://www.kee ...

  6. ThinkPHP+JQuery实现文件的异步上传

    前端代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...

  7. 容易被忽略的label标签

    # 容易被忽略的label标签 ## 原始作用 `label`标签是HTML原生的标签,其原始的作用参考[这里](http://www.w3school.com.cn/tags/tag_label.a ...

  8. OdnShop 发布 V1.0 正式版,完整可用的开源微商城系统

    OdnShop是基于ASP.NET 4.0+Mysql开发的开源微商城系统,我们的目标是构建一个核心完善而又轻量级的微商城平台. 本版本更新功能: 1,修正数据库操作的部分表名称的表前缀错误: 2,修 ...

  9. 编剧小记 — Contour

    前言 Contour 是一款比较优秀的编剧辅助软件,按理说这篇文章应该归类到mac小记中,但其操作非常简单,基本上以写作提示为主.只怪所有提示都是英语,而且很多,每次使用打开 Contour 个别单词 ...

  10. 微信小程序学习笔记以及VUE比较

    之前只是注册了一下微信小程序AppID,随便玩了玩HelloWorld!(项目起手式),但是最近看微信小程序/小游戏,崛起之势不可阻挡.小程序我来了!(果然,一入前端深似海啊啊啊啊啊~) 编辑器: S ...