От автора: Vue 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>
Теперь миксин и экземпляр vue имеют один и тот же созданный метод. Результат мы можем увидеть в консоли. Как видим, параметры экземпляра vue и миксина сливаются.
Если у нас будет одно и то же имя функции в методе, то основной экземпляр 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>
Мы видим, что миксин содержит свойство method, в котором определяются функции helloworld и samemethod. А экземпляр vue содержит свойство methods, в котором, опять же, определяются два метода start и samemethod. Вызывается каждый из следующих методов.
vm.hellworld(); // В HelloWorld vm.start(); // метод start vm.samemethod(); // Основной: same method
Как показано выше, мы вызвали функции helloworld, start и samemethod. samemethod также присутствует в миксине, однако, приоритет будет иметь основной экземпляр.
Источник: https://www.tutorialspoint.com/
Редакция: Команда webformyself.