vue3获取子组件中ref

在 Vue 3 中，你可以使用 `ref` 和 `provide/inject` 来获取子组件中的 `ref`。

首先，在父组件中，你可以使用 `ref` 创建一个引用，并将其传递给子组件。然后，在子组件中，你可以通过 `inject` 获取到父组件传递的引用。

下面是一个简单的示例：

父组件：

<template>
  <div>
    <ChildComponent :childRef="childRef" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  setup() {
    const childRef = ref(null);

    return {
      childRef
    };
  }
};
</script>

子组件：

<template>
  <div ref="childRef">
    <!-- 子组件的内容 -->
  </div>
</template>

<script>
import { inject, onMounted } from 'vue';

export default {
  setup() {
    const childRef = inject('childRef');

    onMounted(() => {
      // 在子组件中访问子组件的ref
      console.log(childRef.value);
    });

    return {
      childRef
    };
  }
};
</script>

在父组件中，我们使用 `ref` 创建一个名为 `childRef` 的引用，并将其传递给子组件。在子组件中，我们使用 `inject` 获取到父组件传递的引用，并在 `onMounted` 钩子中访问这个引用。

这样，你就可以在子组件中获取到父组件中的 `ref` 了。