Vue.js Mixins

Facebooktwitterredditpinterestlinkedinmailby feather

Vue.js Mixins

The Vue mixins are a flexible method for distributing reusable features to the Vue component. A mixin object can have many component options. Mixins share the reusable code blocks among the components. Whenever a component uses a mixin, all of the mixin options are “mixed” into the component’s options.

Example: This example explains how we can use the Vue mixins in the Vue.js application.

Index.html

Main.js

Output: After executing this code, we will get output, as shown below:

Vue.js Mixins

When a mixin and component have an overlapping options, they will be merged together, as shown below:

Main.js

Output: After executing this code, we will get output, as shown below:

Vue.js Mixins

In the above screenshot, we can see a colored rectangle box that tells the mixin and component are merged together.

If we use the same function name in the methods, the main vue instance will takes the maximum priority.

Example: Let’s take an example to understand how we can use the same function names in the methods.

Index.html

Main.js

Output: After executing this code, we will get output, as shown below:

Vue.js Mixins

Here, we can see that the mixin has a method property in which two methods are defined that is “helloworld” and “mainmethod”. Similarly, the Vue instance also has a method property in which again two methods are defined that is “first” and “mainmethod”.

Each of the above methods are defined as a  following code snippet:

Facebooktwitterredditpinterestlinkedinmailby feather