vue3 中 继承ui组件

在 Vue3 中，继承 UI 组件有两种常见的方式：

1. 使用 mixin

可以使用 mixin 来将 UI 组件的属性和方法混入到子组件中。具体步骤如下：

- 创建一个 mixin 文件，将 UI 组件的属性和方法写入其中；
- 在子组件中引入 mixin 文件，并使用 mixins 选项将其混入到组件中。

示例代码：

// mixin.js
import UIComponent from 'ui-component';

export default {
  extends: UIComponent,
  // 其他属性和方法
}

// 子组件
<template>
  <div>
    <!-- UI 组件的内容 -->
  </div>
</template>

<script>
  import mixin from './mixin';

  export default {
    mixins: [mixin],
    // 子组件的其他属性和方法
  }
</script>

2. 使用 extends

可以直接使用 extends 关键字来继承 UI 组件，然后在子组件中重写需要修改的属性和方法。具体步骤如下：

- 创建一个基础组件，使用 extends 关键字继承 UI 组件；
- 在子组件中引入基础组件，并重写需要修改的属性和方法。

示例代码：

// 基础组件
<template>
  <div>
    <!-- UI 组件的内容 -->
  </div>
</template>

<script>
  import UIComponent from 'ui-component';

  export default {
    extends: UIComponent,
    // 其他属性和方法
  }
</script>

// 子组件
<template>
  <div>
    <!-- 修改后的内容 -->
  </div>
</template>

<script>
  import BaseComponent from './base-component';

  export default {
    extends: BaseComponent,
    // 子组件的其他属性和方法
  }
</script>