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