在 Vue 3 中，defineExpose 是一个用于在 <script setup> 语法糖中暴露组件内部的属性或方法给父组件的函数。通过使用 defineExpose，你可以控制哪些属性和方法可以被外部访问，从而增强组件的封装性和安全性。

基本用法

假设你有一个子组件，你想暴露一个计数器和一个增加计数的方法：

<template>
  <div>
    <h2>Child Component</h2>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

const count = ref(0);

function increment() {
  count.value++;
}

// 将计数和增量方法暴露给父组件
defineExpose({
  count,
  increment
});
</script>

在这个例子中，我们使用了 defineExpose 来暴露 count 和 increment 方法。这意味着父组件可以直接访问这些方法和属性。

父组件访问子组件的属性和方法

父组件可以通过 ref 获取子组件的实例，然后访问暴露的属性和方法：

<template>
  <div>
    <h1>Parent Component</h1>
    <child-component ref="childRef"></child-component>
    <button @click="accessChildMethods">Access Child Methods</button>
  </div>
</template>

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

const childRef = ref(null);

function accessChildMethods() {
  if (childRef.value) {
    console.log('Current Count:', childRef.value.count); // 访问count属性
    childRef.value.increment(); // 调用增量方法
    console.log('Updated Count:', childRef.value.count); // 访问更新的计数属性
  }
}
</script>

在这个父组件中，我们通过 ref 获取了子组件的实例，并调用了暴露的 increment 方法和访问了 count 属性。

注意事项：

1. 封装性：使用 defineExpose 可以控制哪些属性和方法被暴露，从而增强组件的封装性。未暴露的属性和方法将无法被外部访问。
2. 响应式：暴露的属性是响应式的，这意味着当它们在子组件中发生变化时，父组件会自动更新。
3. 命名冲突：确保暴露的属性和方法名称不与父组件中的其他属性和方法冲突，以避免意外的行为。

总结：

defineExpose 是一个非常有用的工具，它允许你在 Vue 3 中使用 <script setup> 语法糖时，有选择地暴露组件的内部属性和方法给父组件。这有助于提高组件的封装性和可维护性。