Detailed interpretation of mixin in vue

Vue provides a mixing mechanism - mixins, to achieve more efficient reuse of component content. Let me tell you about my understanding of mixins in Vue. Friends who need it can refer to it

Vue provides a mixing mechanism-mixins, which is used to reuse component content more efficiently. 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 props. In essence, the two are distinct and relatively independent.

And 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 sub-component>>> Parent component sub-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 that 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 me introduce to you the mixin in

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 usage

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.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to render function render in vue (detailed tutorial)

About JS Hill sorting algorithm (detailed tutorial )

Details on the use of jade template engine

How to customize PC WeChat scan code login

How to use javascript to implement QQ space photo album display

About the loop mechanism of js events (detailed tutorial)

Summary of JS sorting algorithm

How to implement form response in Angular4

How to load components in vue webpack require.ensure

How to use iframe elements in vue components

How to use vue to implement the nav navigation bar

How to implement web page scrolling up

How to implement breakpoint debugging ts files in Angular2

How to implement lazy loading of routes in vue-router

How to implement dynamic search using Angularjs filter

How to build a vue application through vue-cli

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