In Vue.js Mixins is one of the easiest ways to share reusable code between different components. Mixin objects can use any of the component options — data, mounted, created, update, etc — and when a component uses a mixin, all of the information in the mixin object will be, well, mixed in to the component.
Then, the component has access to all of the options in the mixin as if you declared it in the component itself.
This will make a lot more sense after an example.
mixin.js
export default {
data () {
msg: ‘Hello World’
},
created: function () {
console.log(‘Printing from the Mixin’)
},
methods: {
displayMessage: function () {
console.log(‘Now printing from a mixin function’)
}
}
}
main.js
import mixin from './mixin.js'
new Vue({
mixins: [mixin],
created: function () {
console.log(this.$data)
this.displayMessage()
}
})
// EXPECTED OUTPUT
// => "Printing from the Mixin"
// => {msg: ‘Hello World’}
// => "Now printing from a mixin function"
As you can see, after using the mixin, the component contains all of the data in the mixin, and it is accessed by using this.
You can also define the mixin using a variable instead of a separate file. Honestly, that’s most of what you need to know about mixins.
But I think it’s useful to know more about certain use cases and corner cases.
Also, it’s important to note that when using VueJS lifecycle hooks, the mixin hook will be called before your component’s hook.
What happens if there’s a naming conflict?
A naming conflict between a component and its mixin can happen when there is data, methods, or any component options in the mixin that has the same name as an option in the component. If this occurs, the property in the component itself will take precedence.
For example, if there is a title data variable in both the component and mixin — this.title would return the value defined in the component. In code, this looks like:
mixin.js
export default {
data () {
title: ‘Mixin’
}
}
main.js
import mixin from ‘./mixin.js’
export default {
mixins: [mixin],
data () {
title: ‘Component’
},
created: function () {
console.log(this.title)
}
}
// Output: "Component"
As you can see, the data from the internal component took precedence over the default mixin value.
Global Mixin
You can also apply a mixin globally. Use with 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!"
