前面的话

  本文将详细介绍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. C# GDI+双缓冲技术

    我想有很多搞图形方面的朋友都会用到双缓冲技术的时候,而且有的时候她的确是个头疼的问题.最近我也要用双缓冲技术,程序怎么调试都不合适,当要对图形进行移动时,总是会出现闪烁抖动.在网上找了些资料,说得都不 ...

  2. Python排序算法——插入排序

    有趣的事,Python永远不会缺席! 如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/10787464.html 一.插入排序(Inse ...

  3. [TPYBoard - Micropython之会python就能做硬件 6] 学习使用OLED显示屏

    转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi            欢迎加入讨论群 64770604 一.实验器材 1.TPYBoard板子一块 2.数据线一条 ...

  4. Feature Extractor[ResNet v2]

    0. 背景 何凯明大神等人在提出了ResNet网络结构之后,对其做了进一步的分析工作,详细的分析了ResNet 构建块能起作用的本质所在.并通过一系列的实验来验证恒等映射的重要性,并由此提出了新的构建 ...

  5. List对象去重碎碎念之神叨叨

    前言 List集合操作去除重复数据的这种情况经常会碰到,博客园里面也有很多大神们做过,在这里主要是借鉴然后自己整理了一下,主要是为了方便自己,以后再次碰到这种去重问题,直接打开自己的链接拿起键盘就是干 ...

  6. CentOS 7+nginx+PHP+php-fpm

    根据网上资料配置: location ~ \.php$ { #include fastcgi_params; fastcgi_pass 127.0.0.1:9000; fastcgi_index in ...

  7. H5 表单标签

    33-表单标签3 列表数据 注意点: 1.下拉列表不能输入内容, 但是可以直接在列表中选择内容 2.可以通过给option标签添加一个selected属性来指定列表的默认值 3.可以通过给option ...

  8. Linq sum()时遇到NULL

    当使用linq求和sum()时,如果某列数据为null,就会出现异常 使用下面的语句即可解决相关问题: db.TableModel.Where(w => w.ID == ID).Select(s ...

  9. PAT L3-010 是否完全二叉搜索树

    https://pintia.cn/problem-sets/994805046380707840/problems/994805049870368768 将一系列给定数字顺序插入一个初始为空的二叉搜 ...

  10. 08-webpack的介绍

    在这里我仅仅的是对webpack做个讲解,webpack这个工具非常强大,解决了我们前端很繁琐的一些工具流程繁琐的事情.如果感兴趣的同学,简易还是看官网吧. 中文链接地址:https://www.we ...