defineExpose怎么用

`defineExpose` 是 Vue 3.x 中的新特性，用于向父组件暴露子组件的属性和方法。这样可以使父组件能够更方便地访问子组件的属性和方法，而无需通过 `ref` 或 `$children` 等方式来获取子组件实例。

在子组件中，您可以使用 `defineExpose` 函数来暴露需要向父组件公开的属性和方法。使用方法如下：

import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    // 将 count 和 increment 方法暴露给父组件
    this.$parent.defineExpose({
      count: this.count,
      increment: this.increment
    })
  }
})

在上面的示例中，我们在子组件的 `mounted` 钩子函数中调用 `$parent.defineExpose` 函数将 `count` 属性和 `increment` 方法暴露给父组件。这样，父组件就可以直接使用子组件的属性和方法，而无需通过 `ref` 或 `$children` 等方式来获取子组件实例了。

在父组件中，您可以通过访问子组件实例的 `$attrs` 属性来访问子组件暴露的属性和方法。使用方法如下：

<template>
  <div>
    <span>Count: {{ childCount }}</span>
    <button @click="childIncrement">+</button>
  </div>
  <child-component ref="child"></child-component>
</template>

<script>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  setup() {
    const childRef = ref(null)
    const childCount = ref(0)

    const childIncrement = () => {
      childRef.value.increment()
      childCount.value = childRef.value.count
    }

    return {
      childRef,
      childCount,
      childIncrement
    }
  }
}
</script>

在上面的示例中，我们首先使用 `ref` 函数创建一个子组件的引用 `childRef`，并在父组件的 `setup` 函数中定义了一个 `childIncrement` 函数，该函数通过 `childRef.value` 访问子组件实例，并调用子组件暴露的 `increment` 方法来增加 `count` 属性的值。同时，我们还定义了一个 `childCount` 响应式变量，用于维护子组件的 `count` 属性的值。在模板中，我们使用 `childCount` 和 `childIncrement` 来显示和修改子组件的 `count` 属性的值。