Home >Web Front-end >Vue.js >Learn more about the usage and precautions of mixins in vue
This article will take you to understand the characteristics of mixins (mixing) in Vue, and introduce the usage and precautions of mixins. I hope it will be helpful to everyone!
Basic overview of mixins
The explanation in vue is like this, if you feel that the language You can skip the boring ones by yourself~
Mixins: It is a very flexible way to distribute reusable functions in Vue components. Mixins can contain arbitrary component options. When a component uses a mixin object, all options of the mixin object will be mixed into the options of the component itself.
how to use?
For example:
Define a mix-in object
Mix the mix-in object into the current component
Usage seems to be quite simple
Features of mixins
1 Methods and parameters Not shared among components
The parameter num in the mixed object
The parameter num in component 1 performs the operation of 1
The parameter num in component 2 has not been operated
Look at the num values output by the two components
#As you can see, I changed the value of num in component 1, but the num value in component 2 is still the initial value mixed into the object
2 The value is the option of the object, such as methods, components, etc. The options will be merged, and the components with key conflicts will overwrite the mixed object's
Methods in the mixed object
Methods in the component
Output of the print table
3 Options whose value is a function, such as created, mounted, etc., will be merged and called. The hook function in the mixed object is called before the hook function in the component.
Mixed into the object function The console
The console
of the console in the component function
The difference between vuex and vuex
After the above example, the difference between them should be obvious~
vuex: Used for state management. The variables defined in it can be used and modified in each component. After the value of this variable is modified in any component, the value of this variable in other components will also be modified accordingly.
Mixins: Shared variables can be defined and used in each component. After being introduced into the component, each variable is independent of each other, and the modification of the value will not affect each other in the component.
Differences from public components
The same obvious differences will be listed again~
Component: in the parent component Introducing a component in is equivalent to giving an independent space in the parent component for the child component to use, and then passing values based on props, but essentially the two are relatively independent.
Mixins: After the component is introduced, it is merged with the objects and methods in the component, which is equivalent to extending the objects and methods of the parent component, and can be understood as forming a new component.
Related recommendations: "vue.js Tutorial"
The above is the detailed content of Learn more about the usage and precautions of mixins in vue. For more information, please follow other related articles on the PHP Chinese website!