Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to achieve mixed inheritance in Vue, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Effect of mixed inheritance implementation:

A has a data property and a say method

B has a see method and a name property

After An inherits B, A not only has its own data property and a say method, but also has a see method and a name property of B.

After mixing AB in C, C has its own thing and a data property of A, a say method, and a see method and a name property of B

Inheriting the Vue.extend method

Vue.extend (Vue ComponentOptions) is a global method that uses the underlying Vue constructor to create a "subclass". The parameter is an object (Vue ComponentOptions) that contains component options.

The data property is a special case, which needs to be noted-in Vue.extend () it must be a function (factory function)

/ / create constructor javar Profile = Vue.extend ({template:'

{{firstName}} {{lastName}} aka {{alias}}

', data: function () {return {firstName:' Walter', lastName: 'White', alias:' Heisenberg'}) / / create an instance of the Profile class and mount it on an element. New Profile (). $mount ('# mount-point') extends attribute

Extends** allows declarations to extend another component (which can be a simple option object or constructor) without using Vue.extend. This is mainly to facilitate the expansion of single-file components. Its type is Object or Function

PageTwo.vue file

Page Two import PagingData from'.. / component/PagingData.vue' export default {/ / implementation inherits extends: PagingData}

Note: the paging of the above file is a globally registered custom component, and PagingData is also a component, but its contents are not registered but merged into pageTwo through inheritance.

Second, mixing (mixins)

A blended object can contain any component option. When a component uses a blending object, all options that blend into the object are "blended" into the component's own options.

Merge rule

When components and mixed objects have options of the same name, these options are "merged" in an appropriate manner.

1. Data objects are recursively merged internally, and component data is given priority in the event of conflicts.

2. Hook functions with the same name (lifecycle functions) will be merged into an array, so they will all be called. In addition, hooks mixed with objects are called before the hooks of the component itself.

3. Options with values of object, such as methods, components, and directives, will be merged into the same object. When the key names of two objects conflict, take the key-value pair of the component object.

Extends is also the rule of this merger.

Mixing can be used to implement multiple inheritance. Mixing is not used to implement inheritance. Multiple Vue ComponentOptions (Vue selectable component objects) are merged.

Form: mixins: [merge component 1, merge component 2, …]

PageOne.vue file

Page One import PagingData from'.. / component/PagingData.vue' import PagingFunc from'.. / component/PagingFunc' export default {/ / extends: {PagingFunc, PagingData}, / / extends: [PagingFunc, PagingData], mixins: [PagingFunc, PagingData],}

Note: the paging of the above file is a globally registered custom component, and PagingData and PagingFunc are also components, but instead of registering, their contents are merged into pageOne by mixing.

Thank you for reading this article carefully. I hope the article "how to achieve mixed inheritance in Vue" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.