vue3 setup 中 父组件给子组件传一个子组件的ref名字过来 子组件怎么运用

在 Vue3 的 setup 函数中，如果你需要将一个子组件的 ref 传递给它的父组件，你可以使用 `ref` 函数创建一个 ref 对象，并将其传递给子组件，然后在子组件中通过 `props` 接收该 ref 对象，并可以通过该 ref 对象访问子组件的属性和方法。

以下是一个示例：

父组件中：

<template>
  <ChildComponent :childRef="childRef" />
</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="childDiv">子组件内容</div>
</template>

<script>
export default {
  props: {
    childRef: {
      type: Object,
      required: true,
    },
  },
  mounted() {
    console.log(this.childRef.value); // 输出 <div>子组件内容</div> 的 DOM 对象
  },
};
</script>

在父组件中，我们将子组件的 `childRef` 属性绑定为父组件的 `childRef` 变量。在子组件中，我们通过 `props` 接收了父组件传递的 `childRef` 属性，并将其绑定到了子组件的 `ref="childDiv"` 上。在 `mounted` 钩子函数中，我们可以通过 `this.childRef.value` 访问到子组件的 DOM 对象。