minix 是个什么东西, 就是混合,把你混合给我

浅显表述就是

说 : ‘我叫李四’,

: ‘我叫张三’,

然后把你 混合给我, 就成了

我说 : ‘我叫张三我叫李四’,

所有解说都在例子里,如下:

// minix.js
export default {
data () {
return {
name: 'minix',
minixName: 'minixObj',
flag: false
}
},
mounted() {
console.log('minixMounted');
},
methods: {
speak() {
console.log('this is minix');
},
getData() {
return '100';
}
}
}
 
// todo.vue
import myMinix from './minix'; export default {
data () {
return {
name: 'todo',
lists: [1, 2, 3, 4]
}
}, mounted() {
console.log('todoMounted');
},
minixs: [myMinix], // todo.vue 中声明minix 进行混合
methods: {
speak () {
console.log('this is todo');
},
submit() {
console.log('submit');
},
}
}
//==========

// 最终得到的结果

//==========

export default {
data () {
return {
name: 'todo', // 共同有的data, 最后保留自己的data
lists: [1, 2, 3, 4], // 自己独有的,保留
minixName: 'minixObj', // todo没有的,会被添加进来
flag: false // todo没有的,会被添加进来
}
}, mounted() {
// 在钩子函数中的, 会被合并到todo.vue 的钩子函数中, minix中的代码在前,自己的在后
console.log('minixMounted');
console.log('todoMounted');
},
methods: {
// 同时有的方法, 会被封装为一个数组, 先执行minix中的,后执行todo自己的
speak () {
[
function() {
console.log('this is minix');
},
function() {
console.log('this is todo');
}
].forEach(item => {
item();
})
},
// 自己独有的,保留
submit() {
console.log('submit');
},
// 自己没有的方法会被添加进来
getData() {
return '100';
}
}
}

(完)

 
 
 
 

vue中的minix的更多相关文章

  1. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  2. vue中的重要特性

    一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  3. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  4. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

  5. Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  6. vue中watched属性

    watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...

  7. 七、vue中v-for有时候对页面不会重新渲染,数组变化后如何到渲染页面

      v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...

  8. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  9. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

随机推荐

  1. abp 修改abp.zero的实体映射类,使生成的表和字段为大写状态

    在我们项目中,由于涉及到报表配置管理,可以通过一段sql快捷的配置出一个报表页面.部分sql会与abp框架的一些系统表做关联查询,而abp的映射类没有单独设置表和字段的名称,默认用类名和属性名,区分大 ...

  2. CentOS 建立本地yum源服务器

    安装CentOS系统,配置系统的网络环境 配置静态IP vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 TYPE=Ethernet O ...

  3. kettle学习笔记(六)——kettle转换步骤

    一.概述 转换步骤分类: 1. 增加新的列 2. 字符串处理 3. 行列变换 4. 排序/排重/字段选择 5. 其他转换步骤 二.增加新的列 1.增加常量列 增加一列常量的列 其它增加列的操作大同小异 ...

  4. python装饰器 练习

    用类作为装饰器 练习一 最初代码 class bol(object): def __init__(self, func): self.func = func def __call__(self): r ...

  5. [Deep-Learning-with-Python]基于Keras的房价预测

    预测房价:回归问题 回归问题预测结果为连续值,而不是离散的类别. 波士顿房价数据集 通过20世纪70年代波士顿郊区房价数据集,预测平均房价:数据集的特征包括犯罪率.税率等信息.数据集只有506条记录, ...

  6. Codeforces 954D Fight Against Traffic(BFS 最短路)

    题目链接:Fight Against Traffic 题意:有n个点个m条双向边,现在给出两个点S和T并要增加一条边,问增加一条边且S和T之间距离不变短的情况有几种? 题解:首先dfs求一下S到其他点 ...

  7. HTML 图像实例

    61.插入图像本例演示如何在网页中显示图像.图像标签(<img>)和源属性(Src)在 HTML 中,图像由 <img> 标签定义. <img> 是空标签,意思是说 ...

  8. 百炼1001: Exponentiation 解题

    链接:http://bailian.openjudge.cn/practice/1001/ 思路 乍一看是很简单的题目,但是答案必须高精度输出,因此需要手动实现一个高精度运算方法.如果直接使用int, ...

  9. 学习git 新手。这个写的不错

    转自:https://www.cnblogs.com/wupeiqi/p/7295372.html 版本控制 说到版本控制,脑海里总会浮现大学毕业是写毕业论文的场景,你电脑上的毕业论文一定出现过这番景 ...

  10. Deferred Shading 延迟着色(翻译)

    原文地址:https://en.wikipedia.org/wiki/Deferred_shading 在3D计算机图形学领域,deferred shading 是一种屏幕空间着色技术.它被称为Def ...