Vue Mixins
Definition : It is a hybrid mechanism provided in Vue to efficiently reuse component content. Mixed objects can contain any component options. When a component uses a mixed object, all the options of the mixed object will be mixed into the options of the component itself.
Understanding : After a component is referenced, it is equivalent to opening up a separate space in its parent component, and corresponding operations are performed according to the value passed by the parent component props, but the two are independent of each other.
After the component is introduced, mixins merge the internal content of the component such as data, method and other attributes with the corresponding content of the parent component, which is equivalent to the introduction of various attributes of the parent component.
- Simple component reference: parent component + child component >>> parent component + child component
- mixins: parent component + child component >>> new parent component
Use : method reuse
html
<div id="app">
<child></child>
<kid></kid>
</div>
js
Vue.component('child',{
template:`<h1 @click="foo">child component</h1>`,
methods:{
foo(){
console.log('Child foo()'+this.msg++)
}
}
})
Vue.component('kid',{
template:`<h1 @click="foo">kid component</h1>`,
methods:{
foo(){
console.log('Kid foo()'+this.msg++)
}
}
})
Before using mixins, calling the foo method in two different components requires repeated definitions. If the method is more complicated, the code will be more redundant. With the help of mixins, it becomes very simple:
let mixin={
data(){
return{
msg:1
}
},
methods:{
foo(){
console.log('hello from mixin!----'+this.msg++)
}
}
}
var child=Vue.component('child',{
template:`<h1 @click="foo">child component</h1>`,
mixins:[mixin]
})
Vue.component('kid',{
template:`<h1 @click="foo">kid component</h1>`,
mixins:[mixin]
})
Although here, the two components can use this.msg to refer to the msg defined in the mixins, but the editor tried, the two components did not refer to the same msg, but each created a new msg. If the same data is defined in the component, the msg in the component will be referenced here instead of the mixins.
Method coverage
If you repeatedly define the same method in the component while referencing mixins, the method in the mixins will be overwritten.
var child=Vue.component('child',{
template:`<h1 @click="foo">child component</h1>`,
mixins:[mixin],
methods:{
foo(){
console.log('Child foo()'+this.msg++)
}
}
})
At this time, if you click the h1 label, "Child foo() 1" will be printed in the console. 3. At this time, if you click the h1 label, "Child foo() 1" will be printed in the console.
Merge life cycle
let mixin={
mounted(){
console.log('mixin say hi')//先输出
},
data(){
return{
msg:1
}
},
methods:{
foo(){
console.log('mixin foo()'+this.msg++)
}
}
}
let vm=new Vue({
el:"#app",
data:{
msg: 2
},
mounted: function(){
console.log('app say hi')//后输出
},
methods:{
foo(){
console.log('Parent foo()'+this.msg)
}
}
})
ADD:
mixins: Both components have the same logic and can be used, create a folder mixins, define a mixins reuse code (mixins are objects)
export const showMixin = {
data(){
return {
xx:xx
}
},
methods: {
xx() {
xx=xxx
}
}
}
Then import it in the component. If the component and mixins have the same data, the component has priority
import {
showMixin } from '../mixins/xxx';
export default {
mixins: [showMixin]
Global introduction:
main.js
Vue.mixin ({
created(){
const xx = xxx;
}
})