defineExpose怎么用

在 Vue 3 中，`defineExpose` 是一个用于定义从组合组件向其使用者暴露的公共 API 的函数。它的作用是将组件内部的一些方法或者属性暴露给父级组件或者其他组件，使得它们可以通过组合组件的引用来调用这些方法或者属性。

`defineExpose` 函数需要在组合组件的 `setup` 函数中调用，它接受一个对象作为参数，该对象包含了需要暴露给外部的方法或者属性。例如，以下是一个组合组件的示例：

<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>

在上面的示例中，我们定义了一个名为 `count` 的响应式变量和一个名为 `increment` 的方法，并通过调用 `defineExpose` 函数将它们暴露给外部。接下来，我们可以在父级组件中通过组合组件的引用来调用这些方法或者属性，例如：

<template>
  <div>
    <ChildComponent ref="child" />
    <button @click="handleClick">Increment</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },

  methods: {
    handleClick() {
      this.$refs.child.increment()
    }
  }
}
</script>

在上面的示例中，我们在父级组件中引入了子组件 `ChildComponent`，并在父级组件的模板中使用了它。接着，我们通过 `$refs` 来获取 `ChildComponent` 的引用，并在父级组件的 `handleClick` 方法中调用了 `increment` 方法来增加 `count` 的值。

总之，`defineExpose` 可以帮助我们将组件内部的一些方法或者属性暴露给外部，使得外部可以通过组合组件的引用来调用这些方法或者属性，从而实现更加灵活的组件复用。