Vue3 extends 属性

Vue3 选项式 API

在 Vue3 中，extends 属性是一个非常有用的特性，它允许你继承和扩展已有的组件。

通过使用 extends，你可以在不重复编写代码的情况下，复用和定制现有的组件逻辑。这对于减少代码冗余、提高代码可维护性非常有帮助。

使用场景

extends 属性通常用于以下场景：

复用组件逻辑：当你有一个基础组件，其他组件需要继承它的逻辑时。
定制组件行为：当你需要在继承的基础上，对某些行为进行定制或覆盖时。
构建可配置组件：通过继承和扩展，构建更灵活、可配置的组件。

基本语法

实例

import BaseComponent from './BaseComponent.vue';

export default {
extends: BaseComponent,
// 在这里可以添加新的选项或覆盖已有的选项
};

在上面的代码中，我们通过 extends 属性继承了 BaseComponent 组件。之后，你可以在这个组件中添加新的选项，或者覆盖 BaseComponent 中的已有选项。

示例

1. 基础组件

首先，我们定义一个基础组件 BaseComponent.vue：

实例

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

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

2. 继承组件

接下来，我们创建一个新的组件 ExtendedComponent.vue，它继承自 BaseComponent，并覆盖了 message 数据：

实例

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

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

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

在这个例子中，ExtendedComponent 继承了 BaseComponent 的所有逻辑，但覆盖了 message 数据。因此，最终渲染的结果是 Hello from ExtendedComponent!。

注意事项

选项合并：当使用 extends 属性时，Vue 会进行选项合并。对于 data、methods 等对象类型的选项，Vue 会进行浅合并。如果存在同名属性，子组件的属性会覆盖父组件的属性。
生命周期钩子：如果子组件和父组件都定义了相同的生命周期钩子，那么这两个钩子函数都会被调用，父组件的钩子函数会先于子组件的钩子函数执行。
模板覆盖：extends 属性只继承逻辑部分，模板部分不会被继承。如果需要继承模板，可以考虑使用 slots 或 mixins。