VueJS - Миксины
В основном миксины используются с компонентами. Они разделяют повторно используемый код между компонентами. Когда компонент использует миксин, все параметры миксина становятся частью опций компонента.
пример
<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>Мы увидим, что у миксина есть свойство метода, в котором определены функции helloworld и samemethod. Точно так же экземпляр vue имеет свойство methods, в котором снова определены два метода start и samemethod.
Вызываются все следующие методы.
vm.hellworld(); // In HelloWorld
vm.start(); // start method
vm.samemethod(); // Main: same methodКак видно выше, мы вызвали функции helloworld, start и samemethod. samemethod также присутствует в миксине, однако приоритет будет отдан основному экземпляру, как показано в следующей консоли.
