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>
輸出如下:
