在 vue 3 组合 api 中扩展和覆盖组件

问：

我有一个 vue 组件，它对许多其他人来说很常见。我希望能够在其他组件中继承此组件，在这些组件中，我可以覆盖一些函数或引用，同时重用模板和脚本部分中的大部分逻辑。我知道可组合函数。但它不能轻易适用于模板，不是吗？最好和最干净的方法是什么？

以下是通用组件的结构：

common.vue 格式：

<template>
  <div>
    <div>Title</div>
    <div>{{refToOverride.value}}</div>
  </div> 
</template>
<script>
import { defineComponent, ref} from 'vue'; 
export default defineComponent({
  name: "common"
  setup() {
    const refToOverride= ref("object to override");

    function functionToOverride() {
      return "Override me!"
    }

    return {
      refToOverride,
      functionToOverride,
    };
  },
});
</script>

我想在我想使用公共组件的特定组件中做类似的事情：

<template>
  <div>
    <common/>
  </div> 
</template>
<script>
import { defineComponent} from 'vue'; 
import { common } from ./common.vue
export default defineComponent({
  components: {common}
  setup() {
    common.refToOverride.value = ref("I override a ref");

    common.functionToOverride() = function() {
      return "I override a function!"
    })

  },
});
</script>