In Vue.js, mixins are a set of defined logic, stored in a predefined way specified by Vue.js. We can use these mixins over and over to add functionality to our Vue.js instances and components. So, we can say that mixins are used to distribute reusable functionalities for Vue components. They provide a flexible and straightforward way to deal with Vue.js components and share reusable code among them.
A mixin object can contain any component options. When a component uses a mixin, all options within the mixin are "mixed" into the component's own options and become an integral part of the component options.
Why are Mixins important?
Following is a list of some features that make Vue.js mixins necessary:
The problem Vue.js mixins were supposed to solve
The main reason to use Vue.js is to resolve the re-use problem in the program. Suppose, you have two components that contain a method that does exactly the same thing or performs the same functionality in the two components same as the following code:
After using the both components, your App.vue file should have the both components imported and declared same as following:
Here, you can see that we have repeated the click method code block in both components. This is not an ideal and efficient way to handle memory resources; that's why Vue.js Mixin was introduced.
Vue.js has introduced the mixins as an excellent solution to this problem. By using mixins, you can encapsulate a piece of code or functionality and then import it to use when you need it in various components.
Vue.js Mixin Syntax
The Vue.js mixin syntax would look like the following code:
Let's take a simple example to understand the concept of Vue.js Mixin well.
Let's use a simple CSS file to make the output more attractive.
After the execution of the program, you will see the following output: