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

//定义一个混合对象

var myMixins = {

created:function(){

this.hello();

},

methods:{

hello:function(){

console.log('hello from mixin!');

}

}

}

//定义一个使用混合对象的组件

var Component = vue.extend({

mixins:[myMIxins]

});

var component = new Component();// -->hello from mixin!

选项合并

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

混合对象的钩子将在组件自身钩子之前调用。

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

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

var mixin = {

methods:function(){

console.log('foo')

}

conflicting:function(){

console.log('mixin')

}

}

var vm = new Vue({

mixins:[mixin],

methods:{

bar:function(){

console.log('bar')

},

conflicting:function(){

console.log('from self')

}

}

})

vm.foo();

vm.bar();

vm.conflicting();

Vue 混合的更多相关文章

  1. Vue混合

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

  2. Vue混合mixins

    前面的话 本文将详细介绍Vue混合mixins 概述 混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选 ...

  3. 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令

    最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...

  4. 11、VUE混合

    1.混合的概念(mixture) 混合是以一种灵活的方式,为组件提供代码复用功能.(类似于封装) 混合对象可以包含任意的组件选项.当组件使用了混合对象时,混合对象的所有选项将被“混入”组件自己的选项中 ...

  5. Cordova+vue 混合app开发(一)创建Cordova项目

    简介: Cordova包装你的HTML/JavaScript app到原生app容器中,可以让你访问每个平台设备的功能.这些功能通过统一的JavaScript API提供,让你轻松的编写一组代码运行在 ...

  6. 最简单的方式理解Vue的自定义指令与混合

    vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...

  7. 实现一个简单的vue-router

    所有项目的源代码都放在我的github上,欢迎大家start: https://github.com/Jasonwang911/my-vue-router 首先来看下vue-router的使用: im ...

  8. 使用nodejs进行开发,concurrently模块,使我们同时执行多个命令。

    concurrently模块使用. 安装模块 npm install concurrently 配置concurrently 运行多个服务 当我们使用nodejs和vue混合开发的时候.当要同时启动后 ...

  9. vue的混合mixins学习

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

随机推荐

  1. iOS:ShareSDk的分享

    使用分享类的SDK其实有很多,例如友盟.ShareSDK等等,参照他们的文档集成起来并不是很难,可能出的一些问题也就是配置文件的问题,这里我个人使用了ShareSDK分享,具体操作可出现的问题如下: ...

  2. php 中 拓展 xdebug的完全理解

    question: Xdebug unable to connect to client, where do I start debugging the debugger? I'm setting u ...

  3. Nginx负载均衡+监控状态检测

    Nginx负载均衡+监控状态检测 想用Nginx或者Tengine替代LVS,即能做七层的负载均衡,又能做监控状态检测,一旦发现后面的realserver挂了就自动剔除,恢复后自动加入服务池里,可以用 ...

  4. 动态网站技术CGI

    递信息的规程.CGI规范允许Web服务器执行外部程序,并将它们的输出发送给Web浏览器,CGI将Web的一组简单的静三种主流的动态网站技术: ASP JSP PHP 除之外,此还要了解的动态网站技术 ...

  5. QueryRunner

    在相继学习了JDBC和数据库操作之后,我们明显感到编写JDBC代码并非一件轻松的事儿.为了帮助我们更高效的学习工作,从JDBC的繁重代码中解脱出来,xx给我们详尽介绍了一个简化JDBC操作的组件——D ...

  6. 运用Unity实现AOP拦截器[结合异常记录实例]

      本篇文章将通过Unity实现Aop异常记录功能:有关Unity依赖注入可以看前两篇文章: 1:运用Unity实现依赖注入[结合简单三层实例] 2:运用Unity实现依赖注入[有参构造注入] 另早期 ...

  7. vue 的 生命周期

    图示: 解析: 那么下面我们来进行测试一下 <section id="app-8"> {{data}} </section> var myVue=new V ...

  8. hibernate 一对多双向的CURD

    转自尚学堂教学视频   package com.bjsxt.hibernate; import java.util.HashSet; import java.util.Set; import java ...

  9. Docker Container同时启动多服务 supervisor

    Docker Container同时启动多服务 转载请注明来自:http://blog.csdn.net/wsscy2004 昨天踩了个天坑,我有一个基本的镜像centos6.5+ssh,是通过Doc ...

  10. LR 监控mysql

    sapphire的个人空间 中介绍了LoadRunner监控Mysql和Appache进程占用cpu的方法 方法如下: 公司的新产品需要监控Mysql和Appache进程,求高手帮忙总算成功了. 服务 ...