vue3 ts 使用defineExpose

Vue 3 中的 `defineExpose` 是一个组合式 API，用于将组件内部的一些属性或方法暴露给父组件。它的作用类似于 Vue 2 中的 `$emit`。

在使用 `defineExpose` 前，我们需要先在组件中使用 `defineProps` 来声明需要从父组件接收的属性。然后，我们可以使用 `defineExpose` 来暴露一些属性或方法给父组件使用。

以下是一个示例：

// 子组件 Child.vue
import { defineProps, defineExpose } from 'vue';

export default {
  props: {
    message: String,
  },
  setup(props) {
    // 声明需要从父组件接收的属性
    defineProps(['message']);

    // 暴露方法给父组件使用
    const showMessage = () => {
      console.log(props.message);
    };

    // 使用 defineExpose 暴露方法
    defineExpose({ showMessage });

    return {
      showMessage,
    };
  },
};

<!-- 父组件 Parent.vue -->
<template>
  <div>
    <child :message="messageRef"></child>
    <button @click="child.showMessage()">Show Message</button>
  </div>
</template>

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

export default {
  components: {
    Child,
  },
  setup() {
    const messageRef = ref('Hello from parent');

    return {
      messageRef,
    };
  },
};
</script>

在上面的示例中，子组件 `Child` 使用 `defineProps` 声明了一个名为 `message` 的属性，并使用 `defineExpose` 将 `showMessage` 方法暴露给父组件。父组件 `Parent` 则通过 `@click` 事件来调用子组件的 `showMessage` 方法。

这样，父组件就可以访问子组件的属性和方法了。