在父组件中,你可以使用ref
来引用子组件,并通过.value
来访问它。如果子组件也使用了<script setup>
,并且你需要从父组件访问子组件内部的方法,子组件应该使用defineExpose
来明确暴露其方法
父组件(ParentComponent.vue):
<template>
<div>
<ChildComponent ref="childRef" />
<button @click="callChildMethod">Call Child Method</button>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const childRef = ref<InstanceType<typeof ChildComponent> | null>(null);
function callChildMethod() {
if (childRef.value) {
// 注意:如果子组件使用了<script setup>但没有定义defineExpose,这里可能无法直接访问someMethod
// 假设子组件已经通过defineExpose暴露了someMethod
childRef.value.someMethod();
}
}
</script>