Vue3》》 ref 获取子组件实例 原理

ref

通过ref 获取并且操作DOM元素

通过ref 创建 响应式数据

这样比较好理解，就省略了

通过ref 获取 子组件的实例 原理分析

这个过程可以分为几个关键部分：模板引用、ref 绑定机制和组件实例的暴露

//1. 创建 Ref（父组件）
// 父组件 Parent.vue
<template>
  <ChildComponent ref="childRef" />
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './Child.vue';

// 1. 创建 ref，初始值为 null
const childRef = ref(null);

// 在组件挂载后，childRef.value 将是子组件的实例
console.log(childRef.value); // 初始输出：null
</script>