How to use mixins in Vue

Preface

There is a setting item in Vue called mixins, which is used for code reuse. At the same time, this mixins is also divided into local mixins and global mixins

The explanation in vue is as follows. If you think the language is boring, you can skip it.

Mixins: A very flexible way to distribute reusable functionality in Vue components. Mixin objects can contain arbitrary component options. When a component uses a mixin object, all of the options of the mixin object will be mixed into the component's own options. Application Scenario

Let's first talk about the application scenario of mixins. Suppose we have two components now. When these two components are clicked, they both need to console.log the value of a name attribute in data.

The first component is the school component, as shown below

The second component is the student component

We can see that two different components have a method with the same function. This way of writing will lead to us writing the same code in two components. Two components are acceptable, but if there are 200 components that need such functions, it will be annoying. At this time, we can use mixins to reuse code.

How to use

1. Create a mixin file and expose the corresponding data

Since it is exposed, it must be for others to use, of course, for components

2. Let's talk about local mixins first. Local mixins mean mixing in VueComponet one by one. Global mixins, of course, mix in on the Vue (Vm) object.

Here is how to write a local mixin

Similarly, do the same for the student component

After completion, when we click, the function can be completed in the same way, and the showName method is what we mixed in through mixins, and we only wrote it once

The above is a local mixin, which needs to be mixed in every VueComponet

3. Let's talk about global mixin. We mix it into the Vue object. In this way, all components under Vue will have this method, and there is no need to write it for each component. This writing method is used when it is determined that all components need this method or attribute. Generally, we don't use it this way.

Here’s how

Import in main.js file

The above is global mixing, which is generally not used much, because all components, all components, and all components will be mixed in. There is rarely such demand

Finally, let's talk about what happens if the mixed-in methods, properties, and hook functions already exist locally and a conflict occurs. If there are methods, properties, and hook functions with the same name as the mixed-in methods and properties in this component, the ones in this component will take precedence and the mixed-in ones will not take effect.

However, the lifecycle hook function will take effect regardless of whether it is in this component or mixed in, and the mixed-in lifecycle hook will be executed first, and then the lifecycle hook of this component will be executed.

Summarize

This is the end of this article about how to use mixins in Vue. For more information about how to use mixins in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!