極客書

VueJS 混音

mixin基本上與組件一起使用。它們在組件之間共享可重用代碼。當組件使用mixin時，mixin的所有選項都成爲組件選項的一部分。

Example

<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 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>

Output

Mixins

當mixin和組件包含重疊選項時，它們將被合併，如下例所示。

<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>

現在mixin和vue實例創建了相同的方法。這是我們在控制台中看到的輸出。如圖所示，vue和mixin的選項將被合併。

Mixin Overlapping

如果在方法中碰巧有相同的函數名，則主vue實例將優先。

Example

<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 = {
            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有一個方法屬性，其中定義了helloworld和samemethod函數。類似地，vue實例有一個methods屬性，其中再次定義了start和samemethod兩個方法。

調用以下每個方法。

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

如上所示，我們調用了helloworld、start和samemethod函數。samemethod也存在於mixin中，但是，將優先考慮主實例，如下面的控制台所示。