vue3 单文件组件——父组件访问子组件的实例

如果一个子组件使用的是选项式 API 或没有使用 <script setup>，被引用的组件实例和该子组件的 this 完全一致，这意味着父组件对子组件的每一个属性和方法都有完全的访问权。

有一个例外的情况，使用了 <script setup> 的组件是默认私有的：一个父组件无法访问到一个使用了 <script setup> 的子组件中的任何东西，除非子组件在其中通过 defineExpose 宏显式暴露：

子组件 Child

<script lang='ts' setup>
import {ref} from 'vue';
let refData = ref('寒蝉鸣泣之时')
defineExpose({
refData,
})
</script>

父组件 farther

//通过ref
<Child :show="show"
ref="childRef" />
// ref
const childRef = ref()
const handleClick = () => {
//获取ref中的子组件的refData
childRef.value.refData
}