defineExpose 的应用

defineExpose是Vue 3中的一个新特性，它用于在组件实例中暴露属性或方法，以便在模板中使用。通过使用defineExpose，我们可以将组件内部的属性或方法暴露给父组件或其他组件使用。

在Vue 3中，组件的模板默认是封闭的，即无法直接访问组件实例的属性或方法。但是，有时候我们需要将一些属性或方法暴露给父组件或其他组件使用，这时就可以使用defineExpose来实现。

使用defineExpose的步骤如下：
1. 在组件内部，通过setup函数定义需要暴露的属性或方法。
2. 在setup函数中，使用ref或reactive等响应式API来定义属性或方法。
3. 在组件选项对象中，使用defineExpose将需要暴露的属性或方法进行暴露。

下面是一个示例代码：

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

<script>
import { defineExpose, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    defineExpose({
      count,
      increment
    });

    return {
      count,
      increment
    };
  }
};
</script>

在上面的示例中，我们定义了一个计数器组件，通过defineExpose将count和increment暴露给父组件或其他组件使用。父组件可以直接在模板中访问count属性，并通过调用increment方法来增加计数器的值。