vue3 中 继承ui组件

在 Vue3 中，可以通过使用 `defineComponent` 函数来定义一个组件，并使用 `extends` 关键字来继承另一个组件。例如，下面是一个使用 Element Plus 组件库中的 `ElButton` 组件作为父组件，并定义了一个名为 `MyButton` 的子组件的示例：

import { defineComponent } from 'vue';
import { ElButton } from 'element-plus';

export default defineComponent({
  name: 'MyButton',
  extends: ElButton,
  props: {
    // 子组件的属性
  },
  setup(props, { attrs }) {
    // 子组件的逻辑
  },
  // 子组件的模板
  template: `
    <el-button v-bind="$attrs" v-on="$listeners">
      <slot></slot>
    </el-button>
  `
});

在上述代码中，`defineComponent` 函数返回一个组件选项对象，其中 `extends` 属性指定了父组件，`props` 属性定义了子组件的属性，`setup` 函数定义了子组件的逻辑，`template` 属性定义了子组件的模板。在模板中，使用了 `slot` 元素来插入子组件的内容。

通过这种方式，可以方便地继承和扩展现有的 UI 组件，从而快速构建复杂的界面。