Detailed Explanation of Mixed Inheritance of Vue

Effect of directory mixed inheritance implementation: 1. Inherit Vue. extend method extends attribute 2. Summary of mixed (mixins) merge rules

Effects of mixed inheritance implementation:

A has one data attribute and one say method

B has one see method and one name property

After A inherits B, A has one data attribute and one say method, and one see method and one name attribute of B

After mixing AB in C, C has its own things and one data attribute and one say method of A, and one see method and one name attribute of B

1. Succession

Vue. extend method

Vue. extend (Vue ComponentOptions) is a global method that creates a "subclass" using the underlying Vue constructor. The parameter is an object that contains component options (Vue ComponentOptions). In fact, in fact, the

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

//  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  Profile Class and mounts it into the 1 Elements. 
new Profile().$mount('#mount-point')

extends Properties

extends **** allows declarations to extend another component (which can be a simple option object or constructor) without using Vue. extend. This is mainly for the convenience of extending 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, and PagingData is also a component, but its contents are merged into pageTwo through inheritance without registration.

2. Hybrid (mixins)

1 Blended object can contain any component options. When a component uses blended objects, all blended object options are "blended" into the component's own options.

Merge rule

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

1. Data objects will be merged recursively internally, and component data will take precedence in case of conflict.

2. Hook functions (life cycle functions) with the same name will be merged into an array, so they will all be called. In addition, the hook mixed with the object will be called before the hook of the component itself.

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, 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, which is not intended for inheritance, combining multiple Vue ComponentOptions (Vue optional component objects)

Form: mixins: [Merge Component 1, Merge Component 2,...]

File pageOne. vue

<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 but merged into pageOne through mixing.

Summarize

This article is here, I hope to give you help, but also hope that you can pay more attention to this site more content!