Vue3使用Composition API扩展组件是否可行？如何让方法在setup与模板都可用

问题1：当前扩展Vue组件的方式是否正确？ #

你使用extends做组件继承的语法本身是Vue支持的，但实现逻辑存在严重瑕疵：

• 你手动调用userComponent.setup()的写法是错误的。setup是Vue框架内部触发的生命周期函数，调用时会自动传入props、setup上下文（包含emit、attrs、slots等核心属性），你手动调用没有传入这些参数，一旦用户组件的setup用到了这些属性会直接报错。
• 你把userComponent.setup()的返回值展开到扩展组件的setup返回值里，会导致原组件的setup被执行两次：一次是你手动调用的，一次是Vue继承逻辑自动执行的，会出现响应式变量重复创建、事件监听器重复注册等不可预期的副作用。

问题2：为什么模板能直接访问该方法，却无法在setup中访问？ #

这是两个规则共同作用的结果：

1. 模板的变量是从组件实例的渲染上下文取值的，你扩展组件setup返回的dialogClose和原组件setup返回的属性，会被Vue自动合并到渲染上下文里，所以模板可以正常访问。
2. JS本身是静态作用域，原组件的setup函数定义在userComponent.vue的文件作用域下，这个作用域根本没有声明dialogClose变量，自然无法直接访问。这和Vue无关，是JS本身的作用域规则决定的，哪怕你把变量挂载到组件实例上，也不会自动注入到原组件的setup作用域中。

问题3：通过getCurrentInstance().ctx调用方法是否是合理的方案？ #

完全不合理，属于不推荐的黑盒写法：

• ctx是Vue内部使用的非公开API，不同版本的实现逻辑可能调整，生产环境和开发环境的返回值也存在差异，线上很容易出现兼容性问题。
• 这种写法和Vue实例强绑定，后续做SSR、单元测试都会有额外的兼容成本。

推荐解决方案 #

使用Vue官方推荐的**依赖注入（provide/inject）**实现需求，是插件场景下暴露上下文方法的标准实现：

1. 调整扩展组件的逻辑，不要手动执行原组件的setup，只做依赖注入即可：

import { provide } from 'vue'
const dialogPop = {
  extends: userComponent,
  setup() {
    // 注入所有要暴露给用户组件的对话框API
    provide('dialogApis', {
      dialogClose
    })
  }
}

2. 用户组件中直接通过inject获取API即可：

// userComponent.vue
import { inject } from 'vue'
export default {
  setup() {
    const { dialogClose } = inject('dialogApis')
    const dialogCloseFromSetup = () => {
      dialogClose()
    }
    return { dialogCloseFromSetup }
  }
}

如果要进一步降低用户的使用成本，可以把注入逻辑封装成公共composable：

// 插件导出的公共方法
export const useDialog = () => inject('dialogApis')

用户只需引入调用即可，非常简洁：

import { useDialog } from 'your-dialog-plugin'
setup() {
  const { dialogClose } = useDialog()
}

内容的提问来源于stack exchange，提问作者thenutz