在vue2中，父组件通过ref调用子组件的方法只需要给子组件添加ref属性，然后使用this.$refs.XXX.method即可
<template>
<div>
<input ref="myInput" type="text">
</div>
</template>javascript">export default {
mounted() {
this.$refs.myInput.focus();
}
}
但是在vue3中，子组件需先使用defineExpose将方法暴露给父组件
//子组件
const myMethod = () => {
console.log('Hello from myMethod!');
};
// 将 myMethod 暴露给父组件
defineExpose({ myMethod });<template>
<div>
//父组件中调用
<My***ponent ref="my***ponentRef"></My***ponent>
</div>
</template>调用方法如下：
1、使用getCurrentInstance
<script setup>
import { getCurrentInstance, onMounted } from 'vue';
onMounted(() {
const instance = getCurrentInstance();
const my***ponent = instance.refs.my***ponentRef;
my***ponent.myMethod();
})
</script>
2、使用ref函数创建一个响应式的引用，并将其绑定到子组件上
<script setup>
const My***ponentsRef = ref(null);
My***ponentsRef.value.myMethod();
</script>
