你的位置:首页 > Java教程

[Java教程]Vue混合


gitHub地址: https://github.com/lily1010/vue_learn/tree/master/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>

输出如下: