vue3组合式api父组件调用子组件xxx is not a function

1.第一步在子组件（Son.vue）中写一个方法showModal ，用于显示弹窗

<template>
      <el-dialog
        title="我是子组件"
        v-model="connectVisible"
        width="60%"
        append-to-body
        :close-on-click-modal="false"
      >
        <p>好羞耻啊 我被打开了</p>
      </el-dialog>
</template>

<script setup>
import { ref } from "vue";
const connectVisible = ref(false);
/**
* 子组件中定义的方法
*/
const showModal = () => {
    connectVisible.value = true;
};
</script>

<style lang="scss" scoped>
</style>

2.在父组件中引入子组件

<template>
     <el-button type="primary" @click="openSon">打开子组件</el-button>
     <Son ref="sonRef">
</template>

<script setup>
import { ref } from "vue";
import Son from "./Son"

const sonRef= ref(null);

const openSon = () => {
    openSon.value.showModal()
}

</script>

<style lang="scss" scoped>

</style>

注意：这个时候我们以为大功告成了，但是却发生了错误xxx.showModal is not a function

3. 在子组件中使用defineExpose()暴露方法

以下是vue官网的解释

使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。

可以通过 defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性：

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

4.在son组件中暴露方法

<template>
      <el-dialog
        title="我是子组件"
        v-model="connectVisible"
        width="60%"
        append-to-body
        :close-on-click-modal="false"
      >
        <p>好羞耻啊 我被打开了</p>
      </el-dialog>
</template>

<script setup>
import { ref, defineExpose } from "vue";
const connectVisible = ref(false);
/**
* 子组件中定义的方法
*/
const showModal = () => {
    connectVisible.value = true;
};

/**
* 全文高潮  暴露方法
*/
defineExpose({
  showModal
});
</script>

<style lang="scss" scoped>
</style>

这个时候我们就可以调用子组件中的方法