Hello folks! Welcome back to a new section of our tutorial on Vue.js. In this tutorial post, we will be studying about Vue.js Mixins.
Mixins are fundamentally to be made use of with components. They share reusable code among components. When a component uses mixin, all options of mixin becomes a part of the component options.
Mixins are fundamentally to be made use of with components. They share reusable code among components. When a component uses mixin, all options of mixin becomes a part of the component options.
Example
Following below is a simple example -
<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>
Output
READ: Vue.js | Routing
When a mixin and a component is made up of overlapping options, they are merged as shown in the following example.
<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>
Now the mixin and the vue instance has the same method created. This is the output we see in the console
If we happen to have same function name in methods, then the main vue instance will take priority.
Example
<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>
We will see mixin has a method property in which helloworld and samemethod function are defined. Comparably, vue instance has a methods property in which two methods are defined start and samemethod.
Each of the following methods are called.
Each of the following methods are called.
vm.hellworld(); // In HelloWorld vm.start(); // start method vm.samemethod(); // Main: same method
As seen, we have called helloworld, start, and samemethod function. samemethod is also present in mixin, nevertheless, priority will be given to the main instance, as seen in the following console.
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be discussing about Vue.js Render Function.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.