Vue3 Composition API中getCurrentInstance在submit函数报错求助

问题原因 #

getCurrentInstance() 仅能在组件setup函数的同步执行阶段或生命周期钩子内部获取到组件实例。当submit作为回调函数（比如绑定到原生DOM事件、或被外部非Vue上下文调用）时，执行时已经脱离了组件实例的上下文，导致getCurrentInstance()返回null，进而触发Cannot read properties of null (reading 'ctx')错误。

解决方案 #

方案1：提前保存组件实例引用

在setup函数的同步阶段提前获取并保存实例，后续直接使用该引用：

import { getCurrentInstance, onMounted } from 'vue'

export default {
  setup() {
    // 在setup同步执行时获取实例并保存
    const instance = getCurrentInstance()

    const submit = () => {
      instance.ctx.$refs.modalLoading.openModal()
    }

    onMounted(() => {
      instance.ctx.$refs.modalLoading.closeModal()
    })

    return { submit }
  }
}

方案2：使用Composition API原生ref绑定（推荐）

避免依赖内部的ctx属性（属于Vue内部实现，可能存在版本兼容风险），直接通过ref绑定组件/DOM元素：

import { ref, onMounted } from 'vue'

export default {
  setup() {
    // 定义与模板ref同名的ref变量
    const modalLoading = ref(null)

    const submit = () => {
      modalLoading.value.openModal()
    }

    onMounted(() => {
      modalLoading.value.closeModal()
    })

    return { submit, modalLoading }
  }
}

模板中需对应绑定ref：

<ModalLoading ref="modalLoading" />

说明 #

方案2更符合Vue3 Composition API的设计理念，代码更直观且避免依赖内部API，稳定性和可维护性更强。

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