MOCKSTACKS
EN
Questions And Answers

More Tutorials









VueJs Mixins

Examples

Global Mixin


You can also apply a mixin globally. Use caution! Once you apply a mixin globally, it will affect every Vue instance created afterwards. When used properly, this can be used to inject processing logic for custom options:
// inject a handler for `myOption` custom option
Vue.mixin({
 created: function () {
 var myOption = this.$options.myOption
 if (myOption) {
 console.log(myOption)
 }
 }
})
new Vue({
 myOption: 'hello!'
})
// -> "hello!"

Use global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components. In most cases, you should only use it for custom option handling like demonstrated in the example above.

Custom Option Merge Strategies


When custom options are merged, they use the default strategy, which simply overwrites the existing value. If you want a custom option to be merged using custom logic, you need to attach a function to Vue.config.optionMergeStrategies:
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
 // return mergedVal
}

For most object-based options, you can simply use the same strategy used by methods:
var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods

Basics


Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options.
// define a mixin object
var myMixin = {
 created: function () {
 this.hello()
 },
 methods: {
 hello: function () {
 console.log('hello from mixin!')
 }
 }
}
// define a component that uses this mixin
var Component = Vue.extend({
 mixins: [myMixin]
})
var component = new Component() // -> "hello from mixin!"

Option Merging


When a mixin and the component itself contain overlapping options, they will be “merged” using appropriate strategies. For example, hook functions with the same name are merged into an array so that all of them will be called. In addition, mixin hooks will be called before the component’s own hooks:
var mixin = {
 created: function () {
 console.log('mixin hook called')
 }
}
new Vue({
 mixins: [mixin],
 created: function () {
 console.log('component hook called')
 }
})
// -> "mixin hook called"
// -> "component hook called"

Options that expect object values, for example methods, components and directives, will be merged into the same object. The component’s options will take priority when there are conflicting keys in these objects:
var mixin = {
 methods: {
 foo: function () {
 console.log('foo')
 },
 conflicting: function () {
 console.log('from mixin')}
 }
}
var vm = new Vue({
 mixins: [mixin],
 methods: {
 bar: function () {
 console.log('bar')
 },
 conflicting: function () {
 console.log('from self')
 }
 }
})
vm.foo() // -> "foo"
vm.bar() // -> "bar"
vm.conflicting() // -> "from self"

Note that the same merge strategies are used in Vue.extend()

Conclusion

In this page (written and validated by ) you learned about VueJs Mixins . What's Next? If you are interested in completing VueJs tutorial, your next topic will be learning about: VueJs Modifiers.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.