vue3怎么使用defineExpose

前言： 在Vue3中，通过使用`defineExpose`来暴露组件内部的方法和属性，从而能够在父组件中访问到。这个新的特性能够帮助我们封装可重用的逻辑，并且提供了一种更加灵活的方式来组织组件的API。 使用方法： 要使用`defineExpose`，我们需要在组件的`setup`函数中将需要暴露给父组件的方法和属性写在`defineExpose`方法中。这样，这些方法和属性就可以在组件的父组件中通过`$refs`访问到了。

示例代码：

// Child.vue
<template>
  <div>
    <p>Child Component</p>
    <button @click="handleClick">Click me</button>
  </div>
</template>

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

export default {
  setup() {
    const handleClick = () => {
      console.log('Button clicked');
    }

    defineExpose({
      handleClick,
    });

    return {
      handleClick,
    }
  }
}
</script>

在上面的例子中，Child.vue组件暴露了一个名为handleClick的方法。在setup函数中，我们首先声明了handleClick方法，并且通过defineExpose将其暴露给了父组件。然后通过return语句将handleClick方法返回，这样在组件内部可以直接使用该方法。

在父组件中，我们可以通过$refs来访问子组件的方法和属性。在模板中使用ref来引用子组件，然后通过$refs来访问子组件上的exposed方法和属性。

示例代码：

// Parent.vue
<template>
  <div>
    <child ref="childRef"></child>
    <button @click="handleChildClick">Call child method</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleChildClick() {
      this.$refs.childRef.handleClick();
    },
  },
}
</script>

在上面的例子中，我们在父组件的模板中引用了Child组件，并且指定了ref名称为childRef。在父组件的methods中定义了handleChildClick方法，该方法调用了子组件的handleClick方法，通过this.$refs.childRef.handleClick()来实现。这样，在点击"Call child method"按钮时，控制台将输出"Button clicked"。

总结： 使用`defineExpose`可以很方便地从子组件中暴露方法和属性给父组件。通过这种方式，我们可以更加灵活地组织组件的API，帮助封装可重用的逻辑。同时，在父组件中通过$refs访问子组件的exposed方法和属性能够实现更加精细化的交互和通信。Vue3的defineExpose特性为组件的封装和复用提供了更多的可能性。