Vue.js mixed in

mixins define a subset of reusable methods or computational properties. Mixed objects can contain any component options. When a component uses a blended object, all options that blend into the object are mixed into the options of the component itself.

Look at a simple example:


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

Option merge

When components and blended objects have the same name option, these options are mixed in the appropriate way.

For example, a data object is internally shallowly merged (a layer of attribute depth), with component data taking precedence when it conflicts with the component's data.

In the following example, a Vue instance contains the same methods as a mixed object. It can be seen from the output that the two options are merged.


var mixin = { created: function () { document.write('mixed in calls' + ' <br>') } } new Vue({ mixins: [mixin], created: function () { document.write('Component Call' + ' <br>') } });< /div>

The output is:

Incoming calls
Component Call

If the methods option has the same function name, the Vue instance will have a higher priority. In the following example, the Vue instance and the methods option of the mixed object contain the same function:


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 is:

HelloWorld method
start start
Main: same method name

The above example, we call the following three methods:


If the same function name is encountered from the output methods option, the Vue instance has a higher priority to execute the output.

Global mix

You can also register mixed objects globally. Pay attention to use! Once the global blended object is used, it will affect all Vue instances created afterwards. When appropriate, you can inject processing logic into your custom objects.


// Inject a processor 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 blending objects with caution, as it affects each separately created Vue instance (including third-party templates).

welookups is optimized for learning.© welookups. 2018 - 2019 All Right Reserved and you agree to have read and accepted our term and condition.