父组件：通过ref获取子组件实例
子组件：通过defineExpose暴露方法
<template>
<div style="text-align:center">
<button @click="callChildMethod">点击获取子组件数据</button>
<div>
获取到子组件的数据如下:
<div> {{childData}} </div>
</div>
<ChildComponent ref="ChildComponentRef"/>
</div>
</template>
<script setup>
import { ref } from "vue";
import ChildComponent from "@/components/childComponent.vue";
const ChildComponentRef = ref(null); // 获取子组件实例(需要跟ref处同名)
let childData = ref();
const callChildMethod = () =>{
if (ChildComponentRef.value) {
childData.value = ChildComponentRef.value.userName +'在'+ ChildComponentRef.value.doSomething()
}
}
</script>
defineExpose 是 Vue 3.2 引入的一个新 API，它是 <script setup> 的配套 API 之一。在 <script setup> 中，所有定义的变量和函数默认是私有的，不能从组件外部访问。
defineExpose 的引入是为了提供一种清晰的方式来控制组件的公共接口，避免所有的内部状态都被外部访问，从而增强组件的封装性。
如果你想让外部组件访问到 <script setup> 内定义的属性或方法，你需要使用 defineExpose 显式地暴露它们。
<template>
<!-- <p>子组件</p> -->
</template>
<script setup>
import { ref, defineExpose } from "vue";
const userName = ref("张三");
function doSomething() {
return "写代码"
};
// 暴露方法
defineExpose({
doSomething,
userName,
});
</script>
在上面的代码中，doSomething 和 userName是在 <script setup> 中定义的，通过 defineExpose 将它们暴露给父组件。这样，父组件就可以通过模板引用（ref）或者 setup() 函数的 context.expose 属性来访问这些暴露的属性和方法。
效果：
image.png
