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!