Учебники

VueJS — Mixins

Ноябрь 10, 2018

Mixins в основном должны использоваться с компонентами. Они разделяют повторно используемый код среди компонентов. Когда компонент использует mixin, все параметры 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 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>

Выход

Примеси

Когда миксин и компонент содержат перекрывающиеся параметры, они объединяются, как показано в следующем примере. 

<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 перекрытие

Если мы получим одно и то же имя функции в методах, то главный экземпляр vue получит приоритет.

пример 

<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 обладает свойством методов, в котором опять-таки определены два метода start и samemethod.

Каждый из следующих методов вызывается. 

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

Как показано выше, мы вызвали helloworld, start и samemethod function. samemehod также присутствует в mixin, однако приоритет будет отдан основному экземпляру, как показано на следующей консоли.

46
Share: