An introduction to the understanding and use of mixins in vue

Hits: 0

mixins

Vue provides a mixing mechanism – mixins (mixing), which is used to achieve the reuse of component content more efficiently.
Mixins are a very flexible way to distribute reusable functionality in Vue components. Mixed objects can contain arbitrary component options. When a component uses a mixin, all options for the mixin will be mixed into the component’s own options.

mixins understanding

After the component is referenced, it is equivalent to opening up a separate space in the parent component to perform corresponding operations according to the value of the parent component’s props. In essence, the two are still distinct and relatively independent.

Mixins, after the introduction of the component, merges the content inside the component such as data and other methods, method and other attributes with the corresponding content of the parent component. It is equivalent to expanding the various property methods of the parent component after the introduction.

Component reference:

Parent Component + Child Component >>> Parent Component + Child Component

mixins:

parent component + child component >>> new parent component

It’s a bit like registering a Vue public method that can be bound to multiple components or multiple Vue object instances for use. Another point is similar to registering a method in the prototype object. In the instance object, that is, the component or the Vue instance object, the method with the same function name can still be defined for overriding, which is a bit like the feeling of subclass and parent class.

Use of mixins

parent component html

<div id="app">
    <child></child>
    <kid></kid>
</div>

Subassembly

Vue.component('child',{
    template:{{EJS0}},
    methods:{
        foo(){
            console.log('Child foo()'+this.msg++)
        }
    }
})

Vue.component('kid',{
    template:{{EJS1}},
    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 complex, 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:{{EJS2}}, 
        mixins:[mixin]
})
Vue.component('kid',{ 
        template:{{EJS3}}, 
        mixins:[mixin]
})

Although here, the two components can refer to the msg defined in the mixins through this.msg, but the editor tried, the two components did not refer to the same msg, but created a new msg each. If the same data is defined in the component, the msg in the component will be referenced here, not in the mixins.

method overriding

If the same method is repeatedly defined in the component while referencing the mixins, the method in the mixins will be overridden.

var child=Vue.component('child',{
    template:{{EJS4}},
    mixins:[mixin],
    methods:{
        foo(){
            console.log('Child foo()'+this.msg++)
        }
    }
})

At this point, if the h1 label is clicked, “Child foo() 1” will be printed in the console 3. Merge the life cycle At this point, if the h1 label is clicked, “Child foo() 1” will be printed in the console

Merge Lifecycle

let mixin={
    mounted(){
        console .log( 'mixin say hi' ) // output first
    },
    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' ) //post output
    },
    methods:{
        foo(){
            console.log('Parent foo()'+this.msg)
        }
    }
})

Through the above introduction, I now have a more in-depth understanding of mixins, which is necessary when designing complex components.

You may also like...

Leave a Reply

Your email address will not be published.