Home >Web Front-end >JS Tutorial >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!