Let's talk about Vue's mixin and inheritance in detail

Preface

Mixin in Vue is a relatively simple knowledge point. Developers who are familiar with CSS preprocessing languages ​​such as less and sass must be familiar with mixin. The mixins in Vue are almost the same as the mixins in less, etc. They all inject some defined functions into the Vue components as is, which is somewhat similar to inheritance in object-oriented programming (I just said similar :)).

A mixin is an object whose properties can be the lifecycle hooks and properties of a Vue instance or component instance. When mixed in globally or into a component, the Vue instance or component instance will have the lifecycle hooks and properties defined in the mixin. If there are duplicates between the two, they will be merged according to certain rules.

Mixin

• Extract the function codes that are reused in multiple vue files into a single js file and call it where it is needed.
• Define an object in a js file. In the object, you can write data, methods, components and other codes that can be defined in <script> in the vue file.

Mixin Note (duplicate name)

• If there is a duplication between the data variable name in the component and the data variable name in the mixin, the component takes precedence;
• If there are duplicate names of methods, computed, and wath in a component and methods, computed, and wath in a mixin, the component takes precedence;
• When the life hook function in the component and the life hook function in the mixin have the same name, both will be executed, but the hook function in the component will be executed first;

Local Mixin

Global Mixins

Definition and global registration

Call

inherit

• Note: Multiple inheritance is not suitable here, as multiple inheritance problems will occur more frequently.
• In addition to inheriting .vue files, extends can also use objects in js files like mixin.
• The HTML in the template in the extends inheritance.vue file cannot be inherited

Difference between mixin and inheritance

• Let's first look at the definition in the official document. In fact, both can be understood as inheritance;
• Mixins receive an array of objects (which can be understood as multiple inheritance);
• What extends receives is an object or a function (which can be understood as single inheritance).
• Note: If a component uses both inheritance and mixins, if there is a duplicate name between the two, the mixin will override the inheritance.

Summarize

This is the end of this article about Vue mixins and inheritance. For more relevant Vue mixins and inheritance content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!