Mixins can be said as extension of the component.They share reusable code among components.When a component uses mixins,all options of the mixin become part of the component options.
<html>
<head>
<title>
<script type=text/javascript src=js/vue.js><script>
<head>
<body>
<div id=dvmixins>
<div>
<script type=text/javascript>
var vm = new Vue({
el:"#dvmixins",
data:()
{
},
methods:{
},
});
var myfirstmixins= {
created:function(){
this.callmethodmixins()
},
methods:{
callmethodmixins:function()
{
alert("Hi i am being called from mymixins variable");
}
}
};
var Component = Vue.extend({
mixins:[myfirstmixins]
})
var component=new Component();
<script>
<body>
<html>
Output:
you will see the alert in the browser.
when mixin and the component called same method then they are merged and shown
<html>
<head>
<title>
<script type=text/javascript src=js/vue.js><script>
<head>
<body>
<div id=dvmixins>
<div>
<script type=text/javascript>
var myfirstmixin={
created:function(){
Console.log("First mixin called")
}
}
new Vue({
mixins:[myfirstmixin],
created:function(){
console.log("Component created function called");
}
});
var component=new Component();
<script>
<body>
<html>
Now the myfirstmixin and new vue instance has same method created called.So the output will have both option of vue and mixin will be merged.if you have same method being called then main vue instance method will take the priority.