extends 怎么使用 vue3

在 Vue 3 中，使用 `extends` 继承另一个组件的选项比起 Vue 2 有了一些变化。下面是一个示例：

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ description }}</p>
  </div>
</template>

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

export default {
  extends: BaseComponent,
  data() {
    return {
      title: 'Hello world!',
      description: 'This is a description.',
    };
  },
};
</script>

在这个示例中，我们定义了一个组件，它从 `BaseComponent.vue` 组件扩展而来。通过 `extends` 选项将 `BaseComponent` 作为父组件，子组件会继承其所有选项，包括生命周期钩子、计算属性和方法等。我们还可以通过 `data` 选项来定义自己的数据，这些数据会与父组件的数据合并。在模板中，我们可以使用 `title` 和 `description` 数据，它们会渲染到页面上。

需要注意的是，如果要覆盖父组件的选项，可以直接在子组件中重新声明该选项即可。例如，如果我们想在子组件中重写 `mounted` 钩子，可以这样做：

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

export default {
  extends: BaseComponent,
  data() {
    return {
      title: 'Hello world!',
      description: 'This is a description.',
    };
  },
  mounted() {
    console.log('Child component mounted');
  },
};
</script>

这样就可以在子组件中重写 `mounted` 钩子，而不影响父组件的逻辑。