vue3 父组件调用子组件的ref

在 Vue3 中，可以通过 `ref` 和 `v-bind` 来实现父组件调用子组件的 `ref`。具体步骤如下：

1. 在子组件中，使用 `ref` 定义要调用的 DOM 元素或组件实例：

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

2. 在父组件中，使用 `v-bind` 将子组件的 `ref` 绑定到父组件的数据中：

   <template>
     <child-component :parent-ref="childRef"></child-component>
   </template>

3. 在子组件中，使用 `inject` 注入父组件传递过来的数据，并将其存储为 `parentRef`：

   <script>
     import { inject } from 'vue'
     export default {
       setup() {
         const parentRef = inject('parentRef')
         return {
           parentRef
         }
       }
     }
   </script>

4. 父组件就可以通过调用子组件的 `parentRef` 来访问子组件的 `ref` 了：

   <script>
     import { ref, onMounted } from 'vue'
     export default {
       setup() {
         const childRef = ref(null)
         onMounted(() => {
           console.log(childRef.value) // 访问子组件的 ref
         })
         return {
           childRef
         }
       }
     }
   </script>