vue3父组件使用ref调用子组件方法

在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

<script setup>
import { getCurrentInstance, onMounted } from 'vue';

onMounted(() {
  const instance = getCurrentInstance();
  const myComponent = instance.refs.myComponentRef;
  myComponent.myMethod();
})
</script>

2、使用ref函数创建一个响应式的引用，并将其绑定到子组件上

<script setup>
const MyComponentsRef = ref(null);
MyComponentsRef.value.myMethod();
</script>