不同于v2的写法,在v3中,子组件的方法和变量需要用defineExpose 暴露出去,defineExpose 是 Vue 3 提供的一个 API，用于显式地暴露组件中的方法或属性给外部（通常是父组件）。它的主要用途是让你能够控制哪些内容可以被父组件通过 ref 或 $refs 访问到。

代码演示

子组件

<template><div v-show="visible" class="child-component"><!-- 子组件的内容 --><p>This is the child component.</p></div>
</template><script setup lang="ts">javascript">
import { ref } from 'vue';// 定义一个 ref 变量来控制组件的显示和隐藏
const visible = ref(false);// 定义一个方法来切换显示/隐藏状态
const toggleVisibility = () => {visible.value = !visible.value;
};// 暴露方法和变量给父组件
defineExpose({toggleVisibility,
});
</script><style scoped>
.child-component {padding: 10px;border: 1px solid #ccc;
}
</style>

父组件

<template><div><button @click="toggleChildVisibility">Toggle Child Visibility</button><ChildComponent ref="childRef" /></div>
</template><script setup lang="ts">javascript">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';// 通过 ref 引用子组件实例
const childRef = ref<InstanceType<typeof ChildComponent> | null>(null);// 切换子组件显示/隐藏的方法
const toggleChildVisibility = () => {if (childRef.value) {childRef.value.toggleVisibility();}
};
</script><style scoped>
button {margin-bottom: 10px;
}
</style>