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:
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>
<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>
<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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
13 Aug, 2020
Like Article
Save Article