Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use mixins in vue, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Basic Overview of mixins

The explanation in vue is that if you think the language is boring, you can skip it by yourself.

Mixins: is a very flexible way to distribute reusable functionality in Vue components. Blending objects can contain any component option. When a component uses a blend object, all options for blending the object are mixed into the component's own options.

How do I use it?

Take a chestnut:

Define a blend object

Mix the blending object into the current component

The usage doesn't seem to be quite simple.

Characteristics of mixins

1 methods and parameters are not shared among components

Parameter num in mixed object

The parameter num in component 1 performs the operation of + 1

Parameter num in component 2 is not manipulated

Look at the output num values of the two components

As you can see, I changed the value in num in component 1, and the Num value in component 2 is still the initial value mixed into the object.

2 options with values of objects, such as methods,components, will be merged, and components with key conflicts will override the

Methods to blend into an object

Methods in component

The output of the printer

3 options with a value of function, such as created,mounted, etc., are called together, and the hook function in the mixed object is called before the hook function in the component.

Console mixed with object functions

Console in component function

The printing of the printing desk

The difference from vuex

After the above example, the difference between them should be obvious.

Vuex: used for state management, the variables defined can be used and modified in each component, and after the value of this variable is modified in any component, the value of this variable in other components will also be changed.

Mixins: common variables can be defined and used in each component. After being introduced into the component, the variables are independent of each other, and changes in values do not affect each other in the component.

The difference between common components and common components

The same obvious difference, let's list it again.

Component: introducing a component into the parent component is equivalent to giving a separate space in the parent component for the child component, and then passing the value according to the props, but the two are relatively independent in nature.

Mixins: merge with the objects and methods in the component after the introduction of the component, which is equivalent to extending the objects and methods of the parent component, which can be understood as the formation of a new component.

Thank you for reading this article carefully. I hope the article "how to use mixins in vue" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.