在Vue3中，父组件调用子组件中的方法

前言：

最近在写一个项目的过程中，遇到了父组件需要调用子组件中方法的情况，最终找到了实现方法，总结如下：

1.在子组件中定义方法并暴露出去

//在popupType组件中
<template>
  <div v-show="show">
   我是蓝宇逸辰
  </div>
  <button @click="crossPopup">X</button>
</template>
<script setup>
import { ref，defineExpose } from 'vue';
let show = ref(false);
const crossPopup = () => {
  show.value = !show.value;
}
defineExpose({
  crossPopup,
});
</script>

2.在父组件中获取子组件并调用子组件中的方法

<template>
  <div>
    <button @click="changeShow">显示</button>
    //2.1
    <PopupType ref="childComp"></PopupType>
  </div>
</template>
<script setup>
import PopupType from '../components/popupType.vue';
import { ref } from 'vue';
//2.2
const childComp = ref(null);
//2.3
const changeShow = () => {
  childComp.value.crossPopup()
}
</script>