defineExpose怎么暴露方法

在 Vue 3 中，`defineExpose` 可以用来暴露组合组件中的方法和属性。以下是一个示例，展示如何在组合组件中使用 `defineExpose` 来暴露方法：

<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({
      increment
    })

    return {
      count
    }
  }
}
</script>

在上面的示例中，我们定义了一个响应式变量 `count` 和一个方法 `increment`，并使用 `defineExpose` 将 `increment` 方法暴露给外部。在父组件中，我们可以通过组合组件的引用来调用 `increment` 方法，例如：

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

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

总之，使用 `defineExpose` 来暴露组合组件中的方法和属性可以使得组件更加灵活和易于复用。