Vue3父组件调用子组件的方法
在 Vue 3 组合式 API 中，如果要在父组件中调用子组件的方法，可以按照以下步骤操作：
- 子组件定义方法：在子组件内部定义一个方法，并暴露给外部使用。
- 父组件引用子组件实例：父组件通过
ref创建一个引用，并将这个引用绑定到子组件上。 - 父组件调用子组件的方法：使用创建的引用调用子组件的方法。
下面是一个具体的示例：
//子组件
<template><div><button @click="showModal">Show Modal</button></div>
</template><script setup>
import { ref } from 'vue';// 定义一个方法
function showModal() {console.log('Modal shown');
}defineExpose({ showModal });
</script>//父组件 (ParentComponent.vue)<template><div><child-component ref="childRef" /><button @click="callChildMethod">Call Child Method</button></div>
</template><script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';const childRef = ref(null);function callChildMethod() {if (childRef.value && childRef.value.showModal) {childRef.value.showModal();}
}
</script>在这个例子中：
- 子组件 (
ChildComponent.vue) 定义了一个showModal方法并通过defineExpose暴露出去。 - 父组件 (
ParentComponent.vue) 通过ref创建了对子组件的引用childRef，并在按钮点击事件中调用了子组件的方法。
这样设置后，当点击父组件中的按钮时，就会调用子组件的 showModal 方法。