Detailed explanation of mixed inheritance in Vue

The effect of mixed inheritance:

A has a data attribute and a say method

B has a see method and a name attribute

After A inherits from B, in addition to its own data attribute and a say method, A also has B's see method and a name attribute

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

1. Inheritance

Vue.extend Method

Vue.extend( Vue ComponentOptions ) is a global method that uses the base Vue constructor to create a "subclass". The argument is an object containing component options (Vue ComponentOptions).​

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

// Create a constructor ja
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// Create an instance of the Profile class and attach it to an element.
new Profile().$mount('#mount-point')

​extends property

extends allows declaring extensions of another component (can be a simple options object or a constructor) without using Vue.extend. This is mainly to facilitate the extension of single-file components. Its type is Object or Function​

pageTwo.vue File

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

Note: paging in the above file is a globally registered custom component. PagingData is also a component, but it is not registered. Instead, its content is merged into pageTwo through inheritance.

2. Mixins

A mixin object can contain arbitrary component options. When a component uses a mixin, all of the mixin's options will be "mixed" into the component's own options.

Merge rules

When a component and a mixin have options with the same name, those options will be "merged" in an appropriate manner.

1. Data objects are recursively merged internally, and component data takes precedence when conflicts occur.

2. Hook functions (lifecycle functions) with the same name will be merged into an array, so they will all be called. Additionally, the mixin's hooks will be called before the component's own hooks.

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

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

You can use mixins to implement multiple inheritance. Mixins are not used to implement inheritance. Merge multiple Vue ComponentOptions (Vue optional component objects) together.

Format : mixins: [Merge component 1, Merge component 2, …]

pageOne.vue File

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

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

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!