What is mixed
Mixin: It is a very flexible way to distribute reusable functions in Vue components. Mixins is a js object that can contain any functional options in the script item in our component, such as data, components, created, methods, computed, watch, etc. When a component uses a blended object, all options for blended objects will be blended into the options of the component itself.
Create Mixins
Create a mixins folder in the src directory, and create a new mixed object js file you want to define in the folder. Use the form of an object to define the mixed object. In the object, you can define the same properties as the vue component, data, components, created, methods, computed, watch and other properties as the vue component, and export the object through export.
Code example:
export const pageMixin={
data() {
return {
page: { // Pagination information pageNo: 10, // Current page limit: 10, // Number of rows per page total: 0, // Total list },
tableList: [], // List data loading: false, // Loading of list data PAGE_SIZES: [5, 10, 20, 30, 50, 90], // List of row counts per page, used to switch row counts per page LAYOUT: "total, sizes, prev, pager, next, jumper" // Functions used in the Element table component }
},
methods: {
// Query list data queryList() {},
// Modify the current page handleCurrentChange(pageNo) {
= pageNo;
();
},
// Modify the number of lines per page handleSizeChange(limit) {
= 1;
= limit;
();
},
},
}Using Mixins
Introduce files in the component page that needs to be called
import {pageMixin} from "@/mixins/pageMixin"
export default {
mixins: [ pageMixin ],
data() {
return {
}
}
}- The component calls the mixed object, so the mixed object option will be merged into the current component.
- When the mixed object and component contain options with the same name, these options will be "merged" in the appropriate way. For example, data objects will be recursively merged internally, and component data will be preferred when conflict occurs, that is, conflicts will overwrite the option of mixing objects.
Use in component()
<template>
<div class="home">
<span>This is a Home page</span>
</div>
</template>
<script>
import myMixins from "../mixins"; //Import mixinexport default {
name: 'Home',
mixins: [myMixins] //Use mixin}
</script>Pay attention to the fact that there is no life cycle hook or method in the Home component, but after opening the page, checking the console, the content is printed. This is the () in the created hook mixed into the object.
mounted life cycle hook
<template>
<div class="home">
<span>This is a Home page</span>
</div>
</template>
<script>
import myMixins from "../mixins";
export default {
name: 'Home',
mixins: [myMixins],
mounted(){
() //The hello method is not defined in this component, the hello is used mixed in }
}
</script>Option merge
When components and blended objects contain options with the same name, these options are "merged" in the appropriate way. Data objects are recursively merged internally and take component data first in case of conflicts.
At this time, the created life cycle hooks with the same name are merged into an array, so they will all be called. Additionally, the hooks that are mixed into the object will be called before the component itself hooks. Because of conflicts, the hello method in methods retains the hello in the component during merge, that is, the option to prioritize the current component, so the print is "hello from Home!".
Options with values of objects, such as methods, components, and directives, will be merged into the same object. When the key names of two objects conflict, take the key-value pair of the component object.
Reusability
As mentioned at the beginning, the mixed object can become a reusable function. We introduce defined mixed object into another component to achieve the same logic and function.
If using this mixed object in another component
<template>
<div class="about">
<span>This is an About page</span>
</div>
</template>
<script>
import myMixins from "../mixins";
export default {
name: "About",
mixins: [myMixins]
};
</script>All those mixed into the objects are executed, realizing the reuse of logic or function.
Then there is a problem. If many components use the same mixed object at the same time, you have to repeat a step, which is to import the mixed object first and then use it, similar to the following
<script>
import myMixins from "../mixins";
export default {
mixins: [myMixins]
};
</script>This is a bit cumbersome and the code is redundant. At this time, we can use global mixing to optimize this problem.
Global mixing
Mixed in can also be used for global registration. Be extra careful when using it! Once global mix-in is used, it will affect each Vue instance created later. This can be used to inject processing logic into custom options when used.
It can be used globally by introducing a mixed-in object through() (acting to all components under this Vue instance)
import mixin from './mixins'; (mixin)
The effect is the same as introducing a blend object separately in each component, which is global blending.
Notice
Use global mix-in with caution, as it affects each individually created Vue instance (including third-party components). Most of the time, it should only be applied to custom options, like the example above. It is recommended to publish it as a plugin to avoid repeated app mixing.
This is the end of this article about the use characteristics of vue mixin. For more related vue mixin content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!