Vue 3 中 defineExpose() 函数的使用

什么是 defineExpose()？

defineExpose() 是 Vue 3 提供的一个 Composition API 函数，用于明确指定哪些内部响应式状态或函数可以被外部访问。

如何使用 defineExpose()？

在子组件中定义：

import { ref, defineExpose } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    function increment() {
      count.value++
    }
    
    // 使用 defineExpose 显式暴露 count 和 increment 方法
    defineExpose({
      count,
      increment
    })
  }
}

注意：defineExpose() 应该放在 setup() 函数的末尾，因为任何在它之后声明的变量或函数都不会被自动包含在暴露的对象中。 

在父组件中访问：

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

<script setup>
import ChildComponent from './ChildComponent.vue';

const childRef = ref(null);

// 在 setup() 函数中使用子组件的暴露方法
onMounted(() => {
  if (childRef.value) {
    console.log(childRef.value.count); // 访问 count 属性
    childRef.value.increment(); // 调用 increment 方法
  }
});
</script>