通过defineExpose暴露的值是undefined

在Vue 3 中，通过 `defineExpose` 暴露的值需要在 `setup` 函数中返回，才能被父组件所访问到。如果你没有返回相关的值，那么它就会是 `undefined`。

例如，如果你在子组件中这样暴露一个值：

// ChildComponent.vue

export default {
  setup() {
    const message = 'Hello from child component';

    const expose = () => {
      return { message };
    };

    defineExpose({ expose });

    return {};
  }
}

那么在父组件中，你需要通过 `$refs` 来访问它：

// ParentComponent.vue

<template>
  <ChildComponent ref="childComponentRef" />
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.childComponentRef.expose().message); // 输出：'Hello from child component'
  }
}
</script>

请注意，`$refs` 只能在子组件挂载之后才能访问，因此你需要在父组件的 `mounted` 钩子函数中访问它。

相关问题

defineExpose方法的使用

defineExpose是Vue3中的一个编译器宏，用于显式指定在组件中哪些属性和方法可以被父组件访问。在使用<script setup>编写组件时，通过defineExpose将需要暴露给父组件的属性和方法进行显式指定，从而避免了在模板引用或者$parent链获取到的组件的公开实例不会暴露任何在<script setup>中声明的绑定的问题。具体使用方法如下：

1.在<script setup>中定义需要暴露给父组件的属性和方法。

2.使用defineExpose方法将需要暴露给父组件的属性和方法进行显式指定。

3.在父组件中通过ref获取子组件实例，并在组件加载完之后访问子组件实例上的属性和方法。

例如，下面是一个使用defineExpose方法的示例代码：

<template>
<div>defineExpose</div>
<child ref="childRef"></child>
</template>

<script setup>
import { ref } from 'vue'
const say = function() {
console.log(8)
}
const count = ref(888)
defineExpose({
say,
count,
})
</script>

<script>
import Child from './child.vue'
export default {
components: {
Child,
},
setup() {
const childRef = ref(null)
onMounted(() => {
// 获取子组件实例上的属性和方法
// 注意一定要在组件加载完之后才能访问到否则是undefined
console.log(childRef.value.count)
console.log(childRef.value.say())
})
return {
childRef,
}
},
}
</script>

<style scoped></style>