Vue混合
2024-04-14 18:24:01
gitHub地址: https://github.com/manlili/vue_learn里面lesson13
一 定位
混合以一种灵活的方式为组件提供分布复用功能。混合对象可以包含任意的组件选项。当组件使用了混合对象时，混合对象的所有选项将被“混入”组件自己的选项中。
实际上,我也没搞懂这句话,先研究再说,放个一年也许就自己慢慢懂了,时间这玩意可以发酵
二 定义
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue混合--定义</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<script type="text/javascript">
var myMinxin= { //第一步,创建一个混合数据
created: function () {
this.hello();
},
methods: {
hello: function () {
alert('你好');
}
}
} var myComponent = Vue.extend({ //将混合注册到Vue
mixins: [myMinxin]
}) new myComponent(); //实例化这个混合
</script>
</body>
</html>
上面代码,弹出:
三 混合与Vue同名冲突
混合对象与组件包含同名选项时，这些选项将以适当的策略合并。例如，同名钩子函数被并入一个数组，因而都会被调用。另外，混合的钩子将在组件自己的钩子之前调用。
同名钩子函数冲突,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue混合--同名冲突</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<script type="text/javascript">
var myMinxin= { //第一步,创建一个混合数据
created: function () {
this.hello();
},
methods: {
hello: function () {
alert('你好');
}
}
} var myComponent = Vue.extend({ //注意Vue的created与minxin的created重合,这里将先执行minxin的created
created: function () {
alert('我是Vue的created');
},
mixins: [myMinxin]
}) new myComponent(); //实例化这个混合
</script>
</body>
</html>
先弹出:
再弹出:
值为对象同名冲突,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue混合--同名冲突</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<script type="text/javascript">
var myMinxin= { //第一步,创建一个混合数据
created: function () {
this.hello();
this.nono();
},
methods: {
hello: function () {
alert('你好1');
},
nono: function () {
alert('nono1');
}
}
} var myComponent = Vue.extend({ //methods中对象冲突,只显示Vue实例中的方法
created: function () {
this.hello();
this.nono();
},
mixins: [myMinxin],
methods: {
hello: function () {
alert('你好2');
},
nono: function () {
alert('nono2');
}
}
}) new myComponent(); //实例化这个混合
</script>
</body>
</html>
输出如下:
最新文章
- 从Mysql数据库中导入导出表结构
- javascript的笔记精简版
- [转载]Windows 7笔记本创建wifi热点供手机上网教程
- ONVIF Event消息解析(How to work with gSoap)
- 架构漫谈：自己开发一个Log框架
- VR全景智慧城市，平台属于每个有创业梦想的人
- exports与module.exports，export与export default 之间的关系和区别
- idea Code激活
- 「雅礼集训 2017 Day5」矩阵
- Java Spring MVC 错误 及 常见问题 总结
- Python全栈之路----函数----高阶函数
- rman list命令
- 安装 Samba服务
- uva-519-拼图
- shell下如何删除文件的某一列
- 给出一个十六进制的数0xFF 0x80 （只有2“位”） 将其转换成有符号的一字节的十进制整数
- python logging 实现的进程安全的文件回滚日志类
- ural 2029 Towers of Hanoi Strike Back (数学找规律)
- C#基础-for循环执行顺序
- java.lang.Integer can not be cast to java.lang.Long