Vue3 extends Property

Vue3 选项式 APIVue3 Options API

In Vue3,extendsthe property is a very useful feature that allows you to inherit and extend existing components.

By usingextends, you can reuse and customize existing component logic without rewriting code. This is very helpful for reducing code redundancy and improving code maintainability.

Use Cases

extendsThe property is typically used in the following scenarios:

  1. Reuse component logic: When you have a base component and other components need to inherit its logic.
  2. Customize component behavior: When you need to customize or override certain behaviors based on inheritance.
  3. Build configurable components: By inheriting and extending, build more flexible and configurable components.

Basic Syntax

Example

import BaseComponent from './BaseComponent.vue';

export default {
  extends: BaseComponent,
  // Here you can add new options or override existing options
};

In the code above, we use theextendsproperty to inherit theBaseComponentcomponent. After that, you can add new options to this component, or overrideBaseComponentthe existing options in it.

Example

1. Base Component

First, we define a base componentBaseComponent.vue：

Example

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from BaseComponent!'
    };
  }
};
</script>

2. Inheriting Component

Next, we create a new componentExtendedComponent.vue, which inherits fromBaseComponent, and overrides themessagedata:

Example

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import BaseComponent from './BaseComponent.vue';

export default {
  extends: BaseComponent,
  data() {
    return {
      message: 'Hello from ExtendedComponent!'
    };
  }
};
</script>

In this example,ExtendedComponentinheritsBaseComponentall the logic of , but overrides themessagedata. Therefore, the final rendered result isHello from ExtendedComponent!。

Notes

  1. Option merging: When using theextendsproperty, Vue performs option merging. Fordata、methodsand other object-type options, Vue performs a shallow merge. If a property with the same name exists, the child component's property overrides the parent component's property.

  2. Lifecycle hooks: If both the child component and the parent component define the same lifecycle hook, both hook functions will be called, and the parent component's hook function will execute before the child component's hook function.

  3. Template override：extendsThe property only inherits the logic part; the template part will not be inherited. If you need to inherit the template, you can consider usingslotsormixins。

Vue3 选项式 APIVue3 Options API

Other Extensions