<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs混合(Mixins)示例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding"></div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
            },
            methods : {
            },
         });
         var myMixin = {
            created: function () {
               this.startmixin()
            },
            methods: {
               startmixin: function () {
                  alert("Welcome  to mixin example");
               }
            }
         };
         var Component = Vue.extend({
            mixins: [myMixin]
         })
         var component = new Component();
      </script>
   </body>
</html>

在瀏覽器中打開上面示例文件，效果如下 -

當(dāng)一個(gè)混合(mixin)和一個(gè)組件包含重疊選項(xiàng)時(shí)，它們將被合并，如下例所示。

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding"></div>
      <script type = "text/javascript">
         var mixin = {
            created: function () {
               console.log('mixin called')
            }
         }
         new Vue({
            mixins: [mixin],
            created: function () {
               console.log('component called')
            }
         });
      </script>
   </body>
</html>

現(xiàn)在mixin和vue實(shí)例創(chuàng)建了相同的方法。下面是在控制臺中看到的輸出。如下所見，vue和mixin的選項(xiàng)將被合并。

如果碰巧在方法中有相同的函數(shù)名，那么主vue實(shí)例將會(huì)優(yōu)先。

示例

創(chuàng)建一個(gè)文件：mixins-2.html -

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs混合(Mixins)示例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding"></div>
      <script type = "text/javascript">
         var mixin = {
            methods: {
               hellworld: function () {
                  console.log('In HelloWorld');
               },
               samemethod: function () {
                  console.log('Mixin:Same Method');
               }
            }
         };
         var vm = new Vue({
            mixins: [mixin],
            methods: {
               start: function () {
                  console.log('start method');
               },
               samemethod: function () {
                  console.log('Main: same method');
               }
            }
         });
         vm.hellworld();
         vm.start();
         vm.samemethod();
      </script>
   </body>
</html>

如上面代碼中，mixin有一個(gè)方法屬性，其中定義了helloworld和相同的方法函數(shù)。同樣，vue實(shí)例也有一個(gè)方法屬性，在這個(gè)屬性里面又定義了兩個(gè)方法start和samemethod。

以下每個(gè)方法都被調(diào)用。

vm.hellworld(); // In HelloWorld
vm.start(); // start method
vm.samemethod(); // Main: same method

如上所示，已經(jīng)調(diào)用了helloworld，start和same方法。同樣的方法也存在于mixin中，但優(yōu)先級將賦予主實(shí)例，如下面的控制臺所示。

上一篇：VueJS入門程序下一篇：VueJS事件

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

VueJS混合