Web project development VUE mixing and inheritance principle

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.

The above is the detailed content of the mixing and inheritance principles of VUE in web project development. For more information about web development, please pay attention to other related articles on 123WORDPRESS.COM!