YouTip

# Vue.js Mixins Mixins define a portion of reusable methods or computed properties. A mixin object can contain any component option. 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: })var component = new Component(); [Try it »](#) * * * ## Option Merging When a component and a mixin object contain options with the same name, these options will be merged in an appropriate manner. For example, the data object will be shallowly merged (one level deep) internally, and the component's data takes precedence when there is a conflict with the mixin's data. In the following example, the Vue instance and the mixin object contain the same method. As you can see from the output, the two options are merged. ## Example var mixin = {created: function(){document.write('Mixin called' + '
')}}new Vue({mixins: , created: function(){document.write('Component called' + '
')}}); The output is: Mixin calledComponent called [Try it »](#) If the methods option contains functions with the same name, the Vue instance will have 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' + '
'); }, samemethod: function(){document.write('Mixin: Same method name' + '
'); }}}; var vm = new Vue({mixins: , methods: {start: function(){document.write('start method' + '
'); }, samemethod: function(){document.write('Main: Same method name' + '
'); }}}); vm.hellworld(); vm.start(); vm.samemethod(); The output is: HelloWorld method start methodMain: Same method name [Try it »](#) In the above example, we called the following three methods: vm.hellworld(); vm.start(); vm.samemethod(); From the output, if the methods option encounters functions with the same name, the Vue instance has higher priority and will execute its version. * * * ## Global Mixins You can also register mixin objects globally. Use with caution! Once a global mixin is used, it will affect **all** subsequently created Vue instances. When used appropriately, it can inject processing logic into 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 »](#) Use global mixins carefully, as they will affect every Vue instance created (including third-party templates).