Vue3子组件ref在script setup调用async函数时无法获取暴露属性

原因 #

当子组件的<script setup>里直接用await调用异步函数时，整个组件的setup会被转换成异步函数。Vue处理异步setup的组件时，会把组件实例包装成Promise对象返回。这时候父组件通过ref拿到的不是实际组件实例，而是这个Promise，自然没法直接访问defineExpose暴露的model属性。

把异步调用放到onBeforeMount这类生命周期钩子里时，组件的setup函数保持同步执行，组件实例会正常创建挂载，父组件的ref能直接拿到实例，也就可以访问到暴露的model属性。Nuxt 3.6.3的组件处理逻辑完全遵循Vue的这一机制，所以会出现你遇到的差异。

解决方案 #

方案1：保持setup同步（已验证有效） #

继续将异步逻辑放在onBeforeMount、onMounted等生命周期钩子中，确保setup函数是同步的，父组件的ref能直接获取到带有暴露属性的组件实例。

方案2：父组件等待异步实例解析 #

如果必须在子组件的setup中使用异步逻辑，可以在父组件中等待ref对应的Promise完成后再访问属性：

<script setup>
import { ref, watch } from 'vue'
const asyncComponent = defineAsyncComponent(() => import('./ChildComponent.vue'))
const childRef = ref(null)

// 方法A：主动用async/await等待
async function getChildModel() {
  if (childRef.value) {
    const instance = await childRef.value
    console.log(instance.model)
  }
}

// 方法B：用watch监听实例就绪
watch(childRef, async (instance) => {
  if (instance) {
    const resolvedInstance = await instance
    console.log(resolvedInstance.model)
  }
}, { immediate: true })
</script>

方案3：用Suspense包裹动态组件 #

在父组件中用<Suspense>标签包裹动态组件，它会自动等待子组件的异步setup执行完成，此时父组件的ref能直接拿到解析后的组件实例：

<script setup>
import { ref } from 'vue'
const asyncComponent = defineAsyncComponent(() => import('./ChildComponent.vue'))
const childRef = ref(null)

// 直接访问即可，Suspense已等待异步完成
function logModel() {
  console.log(childRef.value.model)
}
</script>

<template>
  <Suspense>
    <component :is="asyncComponent" ref="childRef"></component>
    <template #fallback>
      <div>组件加载中...</div>
    </template>
  </Suspense>
  <button @click="logModel">获取model</button>
</template>

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