VueJS - Mixins

Mixins sind grundsätzlich mit Bauteilen zu verwenden. Sie teilen wiederverwendbaren Code zwischen Komponenten. Wenn eine Komponente Mixin verwendet, werden alle Mixin-Optionen Teil der Komponentenoptionen.

Beispiel

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

Ausgabe

Wenn ein Mixin und eine Komponente überlappende Optionen enthalten, werden sie wie im folgenden Beispiel gezeigt zusammengeführt.

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

Jetzt haben das Mixin und die Vue-Instanz dieselbe Methode erstellt. Dies ist die Ausgabe, die wir in der Konsole sehen. Wie zu sehen ist, werden die Option des Vues und des Mixins zusammengeführt.

Wenn wir in Methoden zufällig denselben Funktionsnamen haben, hat die Haupt-Vue-Instanz Vorrang.

Beispiel

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

Wir werden sehen, dass mixin eine methodische Eigenschaft hat, in der helloworld- und samemethod-Funktionen definiert sind. In ähnlicher Weise verfügt die vue-Instanz über eine Methodeneigenschaft, in der wiederum zwei Methoden start und samemethod definiert sind.

Jede der folgenden Methoden wird aufgerufen.

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

Wie oben gezeigt, haben wir die Funktionen helloworld, start und samemethod aufgerufen. Die gleiche Methode ist auch im Mixin vorhanden. Der Hauptinstanz wird jedoch Priorität eingeräumt, wie in der folgenden Konsole dargestellt.