vue defineExpose

`defineExpose` 是 Vue 3 中的一个新特性，它允许组件将一些内部的方法或属性暴露给其父组件。通过使用 `defineExpose`，我们可以在子组件中定义一组公共 API，然后父组件就可以访问这些 API。

在 Vue 3 的组合式 API 中，我们可以使用 `setup` 函数来定义组件的逻辑。在 `setup` 函数中，我们可以返回一个对象，该对象中的属性和方法将会被暴露给组件的模板和父组件。然而，有些时候我们可能不想将所有的属性和方法都暴露给父组件，这时就可以使用 `defineExpose`。

使用 `defineExpose`，我们可以在 `setup` 函数中返回一个数组或者对象，其中包含需要暴露给父组件的属性和方法。这样，在父组件中就可以通过子组件的引用来直接访问这些被暴露的属性和方法。

下面是一个简单的示例：

<template>
  <div>
    <p>Parent component</p>
    <ChildComponent ref="childComponent" />
    <button @click="callChildMethod">Call child method</button>
  </div>
</template>

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

const ChildComponent = {
  setup() {
    const message = ref('Hello from child component');

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

    defineExpose({
      showMessage,
    });

    return {
      message,
    };
  },
};

export default {
  components: {
    ChildComponent,
  },
  methods: {
    callChildMethod() {
      this.$refs.childComponent.showMessage();
    },
  },
};
</script>

在上面的示例中，子组件使用 `defineExpose` 将 `showMessage` 方法暴露给父组件。父组件中使用 `$refs` 来获取子组件的引用，并调用子组件的 `showMessage` 方法。

这样，父组件就可以直接调用子组件的方法或访问子组件的属性，实现了子组件与父组件之间的通信。