Mixins – Mixins are used to reuse code in Vue components that perform the same action. Mixins are like functions in C programming. We can define some actions in mixins and use it wherever it is necessary. Code reusability is simple with the help of mixins.
There are two types of mixins in Vue:-
1. Local Mixins – Local mixins only functions when we use the mixin object in our Vue component. Here, we will use local mixins.
Syntax :
const MixinObjectName = {
methods: {
// you can write your methods here
}
}
2. Global Mixins – If we need the same functionality for all components in Vue, we can use global mixins. Global mixins affect every Vue component.
A small example of global mixins:
// Creating global mixin
Vue.mixin({
created: function () {
var example = this.$options.example
if (example) {
console.log(example)
}
}
})
new Vue({
example: 'This is Vue!!'
})
Output: This is Vue!!
Pre-requisite:
- Vue Js
Approach: First, we will create a Simple Vue.js app without mixin which shows an alert on Button click.
Vue App:
HTML
<!DOCTYPE html> <html> <head> <title>Mixins</title> </head> <body> <div id="app"> <h1 style="text-align:center;"> {{ message }} </h1> <!-- Adding components to HTML --> <my-comp1 style="text-align:center;"> </my-comp1><br> <my-comp2 style="text-align:center;"> </my-comp2> </div> <script> // Creating component 1 const myComp1 = { template: `<div><button @click="pressed('Button 1 is pressed')">Button 1</button> </div>`, // Creating method which shows // alert on button click methods: { pressed(val) { alert(val); } } } // Creating component 2 const myComp2 = { template: `<div><button @click="pressed('Button 2 is pressed')">Button 2</button></div>`, // Creating method which shows alert on button click methods: { pressed(val) { alert(val); } } } // Creating vue app new Vue({ el: '#app', data() { return { message: 'Geeks for Geeks Vue.js | Mixins !!!' } }, // Defining components components: { myComp1: myComp1, myComp2: myComp2 } }); </script> </body> </html> |
In the above code, Component 1 and Component 2 performs the same function (alert message). We wrote separate functions for both the components. So now we can create mixins and reuse the same function in different components.
Creating Mixin for our App:
const Mixin = {
methods: {
//creating method which shows alert on button click
pressed(val){
alert(val);
}
}
}
In the above code, we created an object for mixins as Mixin and defined our function within it. So now we can use this Mixin object in our components.
Adding mixin to existing code:
HTML
<!DOCTYPE html> <html> <head> <title>Mixins</title> </head> <body> <div id="app"> <h1 style="text-align:center;"> {{ message }} </h1> <!-- Adding components to HTML --> <my-comp1 style="text-align:center;"> </my-comp1><br /> <my-comp2 style="text-align:center;"> </my-comp2> </div> <script> // Creating mixin const Mixin = { // Creating method which shows // alert on button click methods: { pressed(val) { alert(val); } } } // Creating component 1 const myComp1 = { template: `<div><button @click="pressed('Button 1 is pressed')">Button 1</button> </div>`, // Using mixin in component 1 mixins: [Mixin] } // Creating component 2 const myComp2 = { template: `<div><button @click="pressed('Button 2 is pressed')">Button 2</button></div>`, // Using mixin in component 2 mixins: [Mixin] } // Creating vue app new Vue({ el: '#app', data() { return { message: 'Geeks for Geeks Vue.js | Mixins !!!' } }, // Defining components components: { myComp1: myComp1, myComp2: myComp2 } }); </script> </body> </html> |
Output:
Before Clicking the Button:
Vue App
When Button 1 is clicked.
Button 1 click
When Button 2 is clicked.
Button 2 click
