Vue3中如何将模板ref作为props传递给子组件？

直接通过props传递即可，关键是子组件要正确接收并处理ref的响应式更新，以下是完整实现步骤和代码示例：

1. 父组件传递模板Ref #

父组件中定义好模板ref后，直接通过props绑定传递给子组件，遵循Vue的props命名规范（推荐使用短横线分隔）：

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

const parentRef = ref()
</script>

<template>
  <div ref="parentRef">
    <!-- 直接将ref作为props传递 -->
    <Child :parent-ref="parentRef" />
  </div>
</template>

2. 子组件接收并使用Ref #

子组件需要先声明接收parent-ref这个props，然后将其传入useScroll。由于模板ref在组件挂载后才会赋值，推荐传递一个返回目标元素的函数给useScroll，这样它能自动响应ref的变化：

<script setup>
import { useScroll } from '@vueuse/core'

// 声明接收props，指定类型为DOM元素
const props = defineProps({
  parentRef: {
    type: HTMLElement,
    required: true
  }
})

// 传递响应式的父组件ref给useScroll
const { x, y, isScrolling, arrivedState, directions } = useScroll(() => props.parentRef)
</script>

注意事项 #

如果父组件存在异步渲染场景，导致子组件挂载时父元素还未生成，可以通过watch监听props.parentRef的变化，确保元素存在时再初始化滚动监听：

import { watch } from 'vue'

watch(() => props.parentRef, (el) => {
  if (el) {
    // 这里可重新初始化useScroll或执行相关逻辑
  }
}, { immediate: true })

内容的提问来源于stack exchange，提问作者user16589580