Vue in understanding and usage of mixin

vue provides a hybrid mechanism --mixins, for a more efficient implementation of a reusable component content. At first I was thinking this is like nothing different components. . Later I found wrong. Let us look at the introduction of the components under ordinary circumstances mixins and what is the difference?

It corresponds to open after assembly incorporated within parent components of a separate space to perform a corresponding operation according to the value of parent element over the props, or both essentially entirely on a single, relatively independent.

And mixins is after the introduction of the component, the content of components sucked inside the respective content attributes, such as data or the like, method and the like are merged parent components. Corresponds to the introduction, the various properties of the parent component of methods have been expanded.

 Simple component references:

          + Parent component subassembly >>> parent element subassembly +

     mixins：

          + Parent component subassembly >>> new parent component

Action: a plurality of components can share data and methods, the introduction of the assembly for use in a mixin, mixin the methods and properties also are incorporated into the assembly, it can be used directly. Hook function will both be called, mixin hook in the first execution.

Look at simple to use:

Establish a mixin.js

export default {
    data() {
     return {
      mixinName: 'mixin'
     }
    },
    created() {
     console.log('mixin...', this.mixinName);
    },
    mounted() {},
    methods: {}
}

Vue file in use mixin

mixin from Import '@ / mixin'; // introduced document mixin

export default {
 mixins: [mixin]
}

Found, mixin.js in the implementation of the code, and the first to perform the same method in the hook function in the parent component! ! !

Note that the method name mixin duplicate it, will give priority to the parent component of the method, this repetition can be avoided own.

 

 

Mixin appeal is simple to use, and may be somewhat more complex mixin block of

For example, we can create a folder called mixins

 Inside a js file is not a mixin pieces, so you can make the module more clearly

Incorporated within parent components:

import resize from '@/mixins/resize'

export default {
  mixins: [resize],
}

Of course, the appeal is only one resize module, if there are multiple words in the array is written on it

Mixin feel a great advantage, we can separate the code clearer, reusability will be even better! !