在vue2中，父组件通过ref调用子组件的方法只需要给子组件添加ref属性，然后使用this.$refs.XXX.method即可
<template>
<div>
<input ref="myInput" type="text">
</div>
</template>export default {
mounted() {
this.$refs.myInput.focus();
}
}
但是在vue3中，子组件需先使用defineExpose将方法暴露给父组件
//子组件
const myMethod = () => {
console.log('Hello from myMethod!');
};
// 将 myMethod 暴露给父组件
defineExpose({ myMethod });<template>
<div>
//父组件中调用
<MyComponent ref="myComponentRef"></MyComponent>
</div>
</template>调用方法如下：
1、使用getCurrentInstance文章来源：https://www.toymoban.com/news/detail-793713.html
<script setup>
import { getCurrentInstance, onMounted } from 'vue';
onMounted(() {
const instance = getCurrentInstance();
const myComponent = instance.refs.myComponentRef;
myComponent.myMethod();
})
</script>
2、使用ref函数创建一个响应式的引用，并将其绑定到子组件上文章来源地址https://www.toymoban.com/news/detail-793713.html
<script setup>
const MyComponentsRef = ref(null);
MyComponentsRef.value.myMethod();
</script>
到了这里，关于vue3父组件使用ref调用子组件方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
