Vue.js Mixins

Mixins define reusable methods or computed properties. A mixin object can contain any component options. When a component uses a mixin object, all options of the mixin object will be mixed into the component's own options.

Let's look at a simple example:

Example

var vm = new Vue({
    el: '#databinding',
    data: {
    },
    methods : {
    },
});
// Define a mixin object
var myMixin = {
    created: function () {
        this.startmixin()
    },
    methods: {
        startmixin: function () {
            document.write("Welcome to the mixin example");
        }
    }
};
var Component = Vue.extend({
    mixins: [myMixin]
})
var component = new Component();

Option Merging

When a component and a mixin object contain the same options, these options will be merged appropriately.

For example, data objects are shallowly merged (one level deep) and the component's data takes precedence in case of conflicts.

In the following example, both the Vue instance and the mixin object contain the same method. The output shows that the options are merged.

Example

var mixin = {
    created: function () {
        document.write('Mixin call' + '<br>')
    }
}
new Vue({
    mixins: [mixin],
    created: function () {
        document.write('Component call' + '<br>')
    }
});

Output:

Mixin call
Component call

If there are method names that are the same in the methods option, the Vue instance has a higher priority. In the following example, both the Vue instance and the mixin object's methods option contain the same function:

Example

var mixin = {
    methods: {
        hellworld: function () {
            document.write('HelloWorld method' + '<br>');
        },
        samemethod: function () {
            document.write('Mixin: same method name' + '<br>');
        }
    }
};
var vm = new Vue({
    mixins: [mixin],
    methods: {
        start: function () {
            document.write('start method' + '<br>');
        },
        samemethod: function () {
            document.write('Main: same method name' + '<br>');
        }
    }
});
vm.hellworld();
vm.start();
vm.samemethod();

Output:

HelloWorld method
start method
Main: same method name

In the above example, we called the following three methods:

vm.hellworld();
vm.start();
vm.samemethod();

If there are method names that are the same in the methods option, the Vue instance has a higher priority and will be executed first.

Global Mixin

You can also register a mixin globally. Be cautious! Once you use a global mixin, it will affect all subsequently created Vue instances. When used properly, it can inject processing logic for custom options.

Example

// Inject a handler for the custom option 'myOption'.
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"

Use global mixins with care, as they will affect every single Vue instance created (including third-party templates).