Vue 混合
混合(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 混合的更多相关文章
- Vue混合
gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson13 一 定位 混合以一种灵活的方式为组件提供分布复用功能.混合对象 ...
- Vue混合mixins
前面的话 本文将详细介绍Vue混合mixins 概述 混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选 ...
- 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令
最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...
- 11、VUE混合
1.混合的概念(mixture) 混合是以一种灵活的方式,为组件提供代码复用功能.(类似于封装) 混合对象可以包含任意的组件选项.当组件使用了混合对象时,混合对象的所有选项将被“混入”组件自己的选项中 ...
- Cordova+vue 混合app开发(一)创建Cordova项目
简介: Cordova包装你的HTML/JavaScript app到原生app容器中,可以让你访问每个平台设备的功能.这些功能通过统一的JavaScript API提供,让你轻松的编写一组代码运行在 ...
- 最简单的方式理解Vue的自定义指令与混合
vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...
- 实现一个简单的vue-router
所有项目的源代码都放在我的github上,欢迎大家start: https://github.com/Jasonwang911/my-vue-router 首先来看下vue-router的使用: im ...
- 使用nodejs进行开发,concurrently模块,使我们同时执行多个命令。
concurrently模块使用. 安装模块 npm install concurrently 配置concurrently 运行多个服务 当我们使用nodejs和vue混合开发的时候.当要同时启动后 ...
- vue的混合mixins学习
mixins 混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式. 混合对象可以包含任意组件选项. 当组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选 ...
随机推荐
- iOS:ShareSDk的分享
使用分享类的SDK其实有很多,例如友盟.ShareSDK等等,参照他们的文档集成起来并不是很难,可能出的一些问题也就是配置文件的问题,这里我个人使用了ShareSDK分享,具体操作可出现的问题如下: ...
- php 中 拓展 xdebug的完全理解
question: Xdebug unable to connect to client, where do I start debugging the debugger? I'm setting u ...
- Nginx负载均衡+监控状态检测
Nginx负载均衡+监控状态检测 想用Nginx或者Tengine替代LVS,即能做七层的负载均衡,又能做监控状态检测,一旦发现后面的realserver挂了就自动剔除,恢复后自动加入服务池里,可以用 ...
- 动态网站技术CGI
递信息的规程.CGI规范允许Web服务器执行外部程序,并将它们的输出发送给Web浏览器,CGI将Web的一组简单的静三种主流的动态网站技术: ASP JSP PHP 除之外,此还要了解的动态网站技术 ...
- QueryRunner
在相继学习了JDBC和数据库操作之后,我们明显感到编写JDBC代码并非一件轻松的事儿.为了帮助我们更高效的学习工作,从JDBC的繁重代码中解脱出来,xx给我们详尽介绍了一个简化JDBC操作的组件——D ...
- 运用Unity实现AOP拦截器[结合异常记录实例]
本篇文章将通过Unity实现Aop异常记录功能:有关Unity依赖注入可以看前两篇文章: 1:运用Unity实现依赖注入[结合简单三层实例] 2:运用Unity实现依赖注入[有参构造注入] 另早期 ...
- vue 的 生命周期
图示: 解析: 那么下面我们来进行测试一下 <section id="app-8"> {{data}} </section> var myVue=new V ...
- hibernate 一对多双向的CURD
转自尚学堂教学视频 package com.bjsxt.hibernate; import java.util.HashSet; import java.util.Set; import java ...
- Docker Container同时启动多服务 supervisor
Docker Container同时启动多服务 转载请注明来自:http://blog.csdn.net/wsscy2004 昨天踩了个天坑,我有一个基本的镜像centos6.5+ssh,是通过Doc ...
- LR 监控mysql
sapphire的个人空间 中介绍了LoadRunner监控Mysql和Appache进程占用cpu的方法 方法如下: 公司的新产品需要监控Mysql和Appache进程,求高手帮忙总算成功了. 服务 ...