VueJS - Mixins
Mieszanki są zasadniczo używane z komponentami. Współdzielą kod wielokrotnego użytku między komponentami. Kiedy składnik używa opcji mixin, wszystkie opcje mixin stają się częścią opcji komponentu.
Przykład
<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>Wynik
Gdy mieszanka i składnik zawierają nakładające się opcje, są one scalane, jak pokazano w poniższym przykładzie.
<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>Teraz mixin i instancja vue mają utworzoną tę samą metodę. To jest wynik, który widzimy w konsoli. Jak widać, opcja vue i mixin zostanie połączona.
Jeśli zdarzy się, że będziemy mieć tę samą nazwę funkcji w metodach, to główna instancja vue będzie miała pierwszeństwo.
Przykład
<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>Zobaczymy, że mixin ma właściwość method, w której zdefiniowane są funkcje helloworld i samemethod. Podobnie instancja vue ma właściwość metod, w której ponownie zdefiniowano dwie metody start i samemethod.
Wywoływana jest każda z poniższych metod.
vm.hellworld(); // In HelloWorld
vm.start(); // start method
vm.samemethod(); // Main: same methodJak widać powyżej, nazwaliśmy helloworld, start i samemethod. samemethod jest również obecny w mixin, jednak priorytet zostanie nadany instancji głównej, jak widać na poniższej konsoli.
