vue mixing (a mixin) using

Mixing (a mixin) provides a very flexible way to distribute Vue assembly reusable functions. A mixed object can contain any component options. When a component uses mixed object, all objects will be mixed with the options "hybrid" option to enter the assembly itself.

Example of use:

demand:

Suppose I demoA demoB component assembly and have some of the same methods, and processing logic. For this time we do not write duplicate code, as the case may be mixed use mixins.

Demo directory:

In mixins.js in the definition of the object and export mix through export:

// definition of a target incorporated herein :( partial mixing, mixing global official website See: HTTPS: //cn.vuejs.org/v2/guide/mixins.html) 
// specific objects and components directly mixed using See: https://cn.vuejs.org/v2/guide/mixins.html 
// after demoA.vue and demeB.vue mixing of two components where they all have, hello method, and automatically executed created the 
Export var = myMixin {
     // other properties of components can be written here 
    Methods: { 
        Hello: function (MSG = '' ) { 
            the console.log ( 'Hello from a mixin' +! ; MSG) 
        } 
    }, 
    Created: function () {
         the this .hello ();
         // with the same name as a hook function combined array, and therefore will be called. In addition, the mixed object hook will be called before the component itself hook.
        console.log ( 'mixed objects -created' ); 
    } 
};

Use mininx demoA mixed in the component assembly and demoB.

demoA.vue

<Template> 
    <div class = "demoA"> 
        demoA
     </ div> 
</ Template> 

<Script> 
    Import myMixin {} from './mixins/mixins' ; 
    Export default { 
        name: 'demoA' , 
        as mixins: [myMixin] ,   // mixed with quite the mixed object's properties are written in a current component in. 
        Data () {
             return { 

            } 
        }, 
        Methods: { 
            bar: function () { 
                the console.log ( 'bar-demoA-Methods' ); 
        },
             .bar (); 
        }, 
        Mounted () { 
            the console.log ( 'demoA-Mounted' );
             // this.hello (demoA); // call the method of mixing a subject methods -> hello from demoA a mixin! 
        } 

    };
 </ Script> 

<style scoped> 

</ style>

demoB.vue

<Template> 
    <div class = "demoB"> 
        demoB
     </ div> 
</ Template> 

<Script> 
    Import myMixin {} from './mixins/mixins' ; 
    Export default { 
        name: 'demoB' , 
        as mixins: [myMixin] , // mixed with quite the mixed object's properties are written in a current component in. 
        Data () {
             return { 
                foo: 'foo' 
            } 
        }, 
        Methods: { 

        }, 
        Created () { 
            the console.log ( 'demoB-Created' 
        },
            the console.log ( 'demoB-Mounted' );
             // this.hello ( 'demoB'); object method calls methods of mixing // -> Hello from a mixin demoB! 
        } 

    };
 </ Script> 

<style scoped> 

</ style>

Simple operating results:

Specific use: See the official website API: https://cn.vuejs.org/v2/guide/mixins.html

Reference article: https://www.jianshu.com/p/1bfd582da93e

vue mixing (a mixin) using

Guess you like