what are vue mixins

Vue mixins are a very flexible way to distribute reusable functions in Vue components. The mix object can contain any component options. When the component uses the mix object, all the options of the mix object will be mixed into the component. option itself.

The operating environment of this tutorial: Windows 7 system, Vue version 2.9.6. This method is suitable for all brands of computers.

mixins

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 object, all the options of the mixin object will be mixed into the options of the component itself.

mixins understanding

After the component is referenced, it is equivalent to opening up a separate space in the parent component to perform corresponding operations based on the values ​​​​from the parent component props. In essence, the two are still distinct and relatively independent.

After the component is introduced, mixins merge the internal content of the component such as data and other methods, method and other attributes with the corresponding content of the parent component. It is equivalent to that after the introduction, various property methods of the parent component have been expanded.

Simple component reference:

Parent component sub-component>>> Parent component sub-component

mixins:

Parent component sub-component> >> new parent component

is a bit like registering a public method of vue, which can be bound to multiple components or multiple Vue object instances for use. Another point is similar to registering a method in a prototype object. In an instance object, that is, a component or a Vue instance object, you can still define a method with the same function name to override it, which is a bit like a subclass and a parent class.

Use of mixins

Reuse of methods

html

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

js

Vue.component('child',{
    template:`<h1 @click="foo">child component</h1>`,
    methods:{
        foo(){
            console.log(&#39;Child foo()&#39;+this.msg++)
        }
    }
})
 
Vue.component(&#39;kid&#39;,{
    template:`<h1 @click="foo">kid component</h1>`,
    methods:{
        foo(){
            console.log(&#39;Kid foo()&#39;+this.msg++)
        }
    }
})

With the help of mixins Previously, calling the foo method in two different components required repeated definitions. If the method was complex, the code would be more redundant. If you use 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(&#39;kid&#39;,{ 
        template:`<h1 @click="foo">kid component</h1>`, 
        mixins:[mixin]
})

Although here, the two components can reference the msg defined in the mixins through this.msg, however, the editor has tried it, and the two components referenced are not the same. Not the same msg, but each created a new msg. If the same data is defined in a component, the msg in the component will be referenced here, not the one in mixins.

The above is the detailed content of what are vue mixins. For more information, please follow other related articles on the PHP Chinese website!