vue3父组件调用子组件方法的大坑

父组件：

<template>
  <ChildComponent ref="callChildMethod" />
</template>
 
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const callChildMethod = ref();
 
// 可以在任何适当的时机调用子组件的方法
function parentMethod() {
  if (callChildMethod.value) {
    callChildMethod.value.childMethod();
  }
}
</script>

子组件

<template>
  <div>子组件内容</div>
</template>
 
<script setup>
import { defineExpose } from 'vue';//要被父组件调用的方法不能这样定义
const childMethod = ()=>{
    console.log('子组件方法被调用');
}
function childMethod() {
  console.log('子组件方法被调用');
}
//注意这点要暴露出去
defineExpose （{
    childMethod
}）
</script>