Detailed explanation of Vue's hybrid inheritance

Effects of hybrid inheritance:

A has a data attribute, and a say method

B has a see method and a name attribute

After A inherits B, A has its own data attribute and a say method, but also a see method and a name attribute of B.

After mixing AB in C, C has its own stuff and a data attribute of A, a say method, and a see method of B and a name attribute of B.

1. Inheritance

method

( Vue ComponentOptions ) is a global method that uses the underlying Vue constructor to create a "subclass". A parameter is an object containing component options (Vue ComponentOptions). ​

The data attribute is a special case, please note - in () it must be a function (factory function)

// Create constructor javar Profile = ({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  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 (can be a simple option object or constructor) without using . This is mainly to facilitate the expansion of single-file components. Its type is Object or Function​

document

<template>
    <div>
        <h3>Page Two</h3>
        <paging :total="total" :pageSize="pageSize" :sizeOptions="sizeOptions"/>
    </div>
</template>
<script>
    import PagingData from '../component/'
    export default {
        // Implement inheritance        extends: PagingData
    }
</script>

Note: The paging of the above file is a globally registered custom component, and PagingData is also a component, but it is not registered but merges its content into pageTwo through inheritance.

2. Mixing (mixins)

A blended object can contain any component options. When a component uses a blended object, all options for blended objects will be "mixed" into the options of the component itself.

Merge rules

When components and blended objects contain options with the same name, these options are "merged" in the appropriate way.

1. The data objects will be recursively merged internally, and component data will be preferred when conflict occurs.

2. The hook function with the same name (lifecycle function) will be merged into an array, so they will all be called. Additionally, the hooks that are mixed into the object will be called before the component itself hooks.

3. Options with values ​​as objects, 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.

Inheritance (extends) is also the rule of this merge​

Multiple inheritance can be achieved using mixing. Mixing is not used to implement inheritance. Combine multiple Vue ComponentOptions (Vue selectable component objects) together​

form: mixins: [Merge component 1, Merge component 2,…]​

document

<template>
    <div>
        <h3>Page One</h3>
        <hr/>
        <paging @pageChangeEvt="cb" :total="total" :pageSize="pageSize" :sizeOptions="sizeOptions"/>
    </div>
</template>
<script>
    import PagingData from '../component/'
    import PagingFunc from '../component/PagingFunc'
    export default {
        // extends: {PagingFunc, PagingData},
        // extends: [PagingFunc, PagingData],
        mixins: [PagingFunc, PagingData],
    }
</script>

Note: The paging of the above file is a globally registered custom component. PagingData and PagingFunc are also components, but they are not registered but merged into pageOne through mixing.

Summarize

That’s all for this article. I hope it can help you, and I hope you can pay more attention to more of my content!