How to use mixins in vue

mixins

MixinsIt is a very flexible way to distribute reusable functions in Vue components.
Mixed objects canIncludes any component options。
When the component uses a hybrid object, all the hybrid object options will beMix inThe component itself is optional.

mixins understand

After reference, the component is equivalent toA separate space is created in the parent component, to perform corresponding operations based on the value from the parent component props, essentially both areClearly divided, relatively independent.

After introducing the component, mixins merges the contents inside the component such as methods, method and other attributes with the corresponding content of the parent component. It is equivalent to that after the introduction, various attribute methods of the parent component have been expanded.

Simple component reference:

• Parent component + child component >>> Parent component + child component

mixins：

• Parent component + child component >>> new parent componentIt's a bit like registering a public method of vue that can be bound to multiple components or multiple Vue object instances. Another point is similar to registering a method in a prototype object, an instance object is a component or a Vue instance object, and it can still beMethods that define the same function name for overwriting, a bit like a subclass and a parent class.

effect:

To summarize it simply, it is a way to distribute the functions in the vue component that can reuse a technology. Using this technology, we can encapsulate the content that needs to be reused into a vue component, which is convenient for next time.

How to use

First, create your own folder in src, and then put the content to be encapsulated into this folder to facilitate subsequent calls

let mymixin={
    methods:{
        handleBtn(){
            alert('The encapsulated content has been triggered!  ')
        }
    }
}
export default mymixin

Global mixing

Global mixing means that we can register the encapsulated component globally in the middle, which is convenient for use anywhere.

import myMixins from "./mixins/"
// Global mixing(myMixins)

Partial mixing

That is, the referenced multiplexed content can only take effect in the current component.

<template>
  <button @click="handleBtn">Click me to trigger</button>
</template>
<script>
import myMixins from '@/'
export default {
    mixins:[myMixins]
}
</script>
<style>
</style>

This allows you to achieve a simple mix-in, reduce the reusability of your code, greatly enhance development efficiency, and you can consider your business with peace of mind instead of constantly typing code

Use of mixins

Reuse of methods

html

<div >
    <child></child>
    <kid></kid>
</div>

js

('child',{
    template:`<h1 @click="foo">child component</h1>`,
    methods:{
        foo(){
            ('Child foo()'+++)
        }
    }
})
('kid',{
    template:`<h1 @click="foo">kid component</h1>`,
    methods:{
        foo(){
            ('Kid foo()'+++)
        }
    }
})

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 mixins, it becomes very simple:

let mixin={
    data(){
        return{
            msg:1
        }
    },
    methods:{
        foo(){
            ('hello from mixin!----'+++)
        }
    }
}
var child=('child',{ 
        template:`<h1 @click="foo">child component</h1>`, 
        mixins:[mixin]
})
('kid',{ 
        template:`<h1 @click="foo">kid component</h1>`, 
        mixins:[mixin]
})

Although here,Two components use msg that can be defined in mixins by reference, however, the editor has tried itThe two components do not refer to the same msg, instead each creates a new msg. If the same data is defined in the component, then msg in the component is referenced here, not in the mixins.

Method coverage

If the same method is repeatedly defined in the component while referring to the mixins, the methods in the mixins will be overwritten.

var child=('child',{
    template:`<h1 @click="foo">child component</h1>`,
    mixins:[mixin],
    methods:{
        foo(){
            ('Child foo()'+++)
        }
    }
})

At this time, if you click the h1 label, you will print "Child foo() 1" in the console. 3. Merge life cycle. At this time, if you click the h1 label, you will print "Child foo() 1" in the console.

Merge life cycle

let mixin={
    mounted(){
        ('mixin say hi')//Output first    },
    data(){
        return{
            msg:1
        }
    },
    methods:{
        foo(){
            ('mixin foo()'+++)
        }
    }
}
let vm=new Vue({
    el:"#app",
    data:{
        msg: 2
    },
    mounted: function(){
        ('app say hi')//Post output    },
    methods:{
        foo(){
            ('Parent foo()'+)
        }
    }
})

Through the above introduction, nowmixinsWith a deeper understanding, it is necessary to design complex components.

This is the end of this article about how to use mixins in vue. For more related mixins content in vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!