vue defineExpose

`defineExpose` 是 Vue 3 中的一个实例方法，它用于向父组件暴露一些内部方法或属性，以便父组件可以直接访问和调用它们。

使用 `defineExpose` 的基本语法如下：

import { defineComponent, defineExpose } from 'vue';

const MyComponent = defineComponent({
  setup() {
    const message = 'Hello';

    const showMessage = () => {
      console.log(message);
    };

    defineExpose({
      showMessage,
    });

    return { message };
  },
});

在上面的代码中，我们定义了一个名为 `MyComponent` 的组件，并在 `setup` 函数中定义了一个内部方法 `showMessage` 和一个内部属性 `message`。然后，通过 `defineExpose` 方法将 `showMessage` 暴露给父组件。

父组件可以像访问普通的子组件属性和方法一样，通过引用子组件的实例来调用暴露的方法，如下所示：

<template>
  <MyComponent ref="myComponentRef" />
</template>

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

export default {
  mounted() {
    this.$refs.myComponentRef.showMessage();
  },
};
</script>

在上面的代码中，我们在父组件中通过 `ref` 引用了子组件实例，并通过 `showMessage` 方法调用了子组件中暴露的方法。

这样，通过 `defineExpose` 可以方便地在 Vue 3 的组件中将一些内部方法或属性暴露给父组件，实现组件间的通信和交互。