在 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
方法。