父组件:通过ref获取子组件实例
<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 显式地暴露它们。
defineExpose 的引入是为了提供一种清晰的方式来控制组件的公共接口,避免所有的内部状态都被外部访问,从而增强组件的封装性。
如果你想让外部组件访问到 <script setup> 内定义的属性或方法,你需要使用 defineExpose 显式地暴露它们。
子组件:通过defineExpose暴露方法
<template><!-- <p>子组件</p> -->
</template><script setup>import { ref, defineExpose } from "vue";const userName = ref("张三");// 属性 const doSomething () => ({return "写代码"});// 暴露方法defineExpose({doSomething,// 暴露方法userName,// 暴露属性});
</script>