Vue.js Mixins

Mixins define a part of reusable methods or computed properties. Mixin objects 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();

Try it Yourself »

Option Merging

When the component and the mixin object contain options with the same name, these options will be mixed in an appropriate way.

For example, data objects are shallowly merged internally (one level of property depth), and when conflicting with the component's data, the component's data takes precedence.

In the following example, the Vue instance and the mixin object contain the same methods. From the output result, we can see that both options are merged.

Example

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

The output result is:

Mixin call
Component call

Try it Yourself »

If there are identical function names in the methods option, the Vue instance will have higher priority. In the following example, both the Vue instance and the mixin object's methods options contain the same functions:

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();

The output result is:

HelloWorld 方法
start 方法
Main：相同方法名

Try it Yourself »

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

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

From the output result, if the same function name is encountered in the methods option, the Vue instance has higher priority and will execute the output.

Global Mixin

You can also globally register a mixin object. Note the usage! Once a global mixin object is used, it will affect all Vue instances created afterwards. When used appropriately, it can inject processing logic for custom objects.

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!"

Try it Yourself »

Use global mixin objects with caution, because they affect every individually created Vue instance (including third-party templates).

Other Extensions