A brief discussion on mixin in vue

Vue provides a mixing mechanism - mixins, to achieve more efficient reuse of component content. At first I thought there was no difference between this and components. . Later I found out it was wrong. Let's take a look at the difference between mixins and imported components under normal circumstances. After the component is referenced, it is equivalent to opening up a separate space in the parent component to perform corresponding operations based on the values ​​​​from the parent component's props. In essence, the two are distinct and relatively independent. Mixins, after introducing the component, merge the internal content of the component such as data and other methods, method and other attributes with the corresponding content of the parent component. It is equivalent to that after the introduction, various property methods of the parent component have been expanded.

Simple component reference:

Parent component+child component>>> Parent component+child component

Mixins:

Parent component+child Component>>> new parent component

It is worth noting that when using mixins, the parent component and the child component both have various attribute methods in the child component, but this does not mean As they share and process these variables at the same time, there will be no communication between the two except merging. When I first saw mixins, I naively seemed to see a downward data sharing solution similar to vuex, and I was very excited.

Let’s introduce mixin in Vue

1. What is mixin

The mixin file is an object that can contain any component of the vue component. It is a very flexible way to distribute reusable functions of Vue components. When a mixin is used by a component, all properties/methods in the minxin will be mixed with the properties/methods in the component.

Second, mixin use

You can have mixins attributes in Vue components, and the value type of this attribute is an array. Introduce mixin as the element mixins of the mixins array: [mixin]

Component A applies mixin, and the attributes of the two, such as methods, components and directives, will be mixed into the same object. If methods, components and directives If there are attributes with the same name in directives, those in mixin will be ignored. Hook functions with the same name will be formed into an array and will all be called, and the mixin's hook function will be called before the component's hook function.

Related recommendations:

riot.js learning [2] mixin

JS custom mixing Mixin function example

What is the concept of Mixin?

The above is the detailed content of A brief discussion on mixin in vue. For more information, please follow other related articles on the PHP Chinese website!