Vue3中<script setup>的defineExpose无法正常使用问题求助

你当前的问题出在直接通过组件名访问暴露的属性——defineExpose暴露的是组件实例的属性，不是组件本身的静态属性，必须先获取子组件的实例引用才能访问。

修改后的App.vue代码 #

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue'

// 创建ref用于绑定子组件实例
const helloWorldRef = ref(null)
</script>

<template>
  <main>
    <!-- 给子组件添加ref属性，绑定到helloWorldRef -->
    <HelloWorld ref="helloWorldRef" />
    <!-- 用可选链避免初始化时null报错，或者加v-if判断实例是否存在 -->
    <h1>version:{{ helloWorldRef?.value?.version }}</h1>
  </main>
</template>

HelloWorld.vue代码无需修改 #

你的子组件代码是正确的，defineExpose({ version })已经正确暴露了响应式的version属性：

<script setup>
import { ref } from 'vue';

const version = ref('1.0.0');

defineExpose({ version });
</script>

<template>
    <div>
        <h3> You’ve successfully created a project with Vue.js and Vuetify. </h3>
    </div>
</template>

核心原因说明 #

在Vue3的<script setup>语法糖中，组件的内部属性默认是对外隐藏的，必须通过defineExpose显式暴露，但这些属性属于组件实例，不是组件构造函数的静态属性。所以你不能直接用HelloWorld.version访问，必须通过ref获取组件实例后，再通过实例对象访问暴露的属性。

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