vue 父组件动态传递ref给子组件应该怎么写？

Question

父组件动态传递ref给子组件应该怎么写？
父组件调用

 <component ref="ccc" :options="scrollOptions"></component>

子组件

       <div class="listScrollBox" ref="变量" @click="clickComponent">
            <slot></slot>
            <slot></slot>
        </div>

这里我想把父组件传递的ccc动态给子组件，然后操作子组件？

Answer 1

父组件：

<template>
  <child-component></child-component>
</template>

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

const ccc = ref(null);
provide('ccc', ccc);
</script>

子组件：

<template>
  <div class="listScrollBox" :ref="ccc" @click="clickComponent">
    <slot></slot>
    <slot></slot>
  </div>
</template>

<script setup>
import { inject } from 'vue';

const ccc = inject('ccc');

const clickComponent = () => {
  // 操作 ccc ref
};
</script>