vue3 defineExpose

`defineExpose` 是 Vue 3 中新增的一个 API，它允许组件将一些属性或方法暴露给父组件，从而实现更好的组件封装和复用。

具体来说，当我们在一个组件中使用 `defineExpose` 定义一个属性或方法时，这些属性或方法会被添加到组件实例的 `$attrs` 和 `$listeners` 属性中，从而可以在父组件中通过 `v-bind` 或 `v-on` 的方式直接访问到。

举个例子，假设我们有一个 `HelloWorld` 组件，其中包含一个 `message` 属性和一个 `sayHello` 方法：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sayHello">Say Hello</button>
  </div>
</template>

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

export default {
  props: {
    message: String
  },
  methods: {
    sayHello() {
      alert('Hello!');
    }
  },
  setup(props, { emit }) {
    // 将 sayHello 方法暴露给父组件
    defineExpose({
      sayHello: () => emit('say-hello')
    });
  }
};
</script>

在父组件中，我们可以直接访问到子组件中暴露出来的 `sayHello` 方法：

<template>
  <div>
    <hello-world message="Hello, World!" v-bind="$attrs" v-on="$listeners" />
    <button @click="handleHelloClick">Say Hello from Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleHelloClick() {
      // 调用子组件中的 sayHello 方法
      this.$refs.helloWorld.sayHello();
    }
  }
};
</script>

需要注意的是，在使用 `defineExpose` 时，我们需要在组件的 `setup` 函数中调用它，而不能在组件选项中调用。此外，如果我们想要暴露多个属性或方法，可以将它们放到一个对象中一次性传入 `defineExpose` 中。