如何将Ref传递给Props？子组件接收Ref为undefined问题解决

问题原因 #

Vue 中$refs的赋值时机是组件挂载完成后。父组件渲染流程里，子组件的mounted钩子会先于父组件的mounted执行，此时父组件内的<div ref="target">还未完成挂载，$refs.target处于undefined状态，导致子组件接收的target props为空。而热模块替换（HMR）时，父组件已经完成过挂载，$refs已存在，所以传递给子组件的是有效的DOM引用。

解决方案 #

方案1：子组件用nextTick延迟获取 #

在子组件的mounted钩子中，通过nextTick等待父组件DOM更新完成后再访问target：

// cmp.vue
mounted() {
  this.$nextTick(() => {
    console.log("target:", this.target); // 正常获取DOM元素
  })
}

方案2：父组件动态传递Ref #

父组件监听$refs.target的变化，待其存在时再传递给子组件：

<!-- parent.vue -->
<template>
  <div ref="target">target</div>
  <cmp :target="currentTarget" />
</template>

<script>
export default {
  data() {
    return {
      currentTarget: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.currentTarget = this.$refs.target
    })
  }
}
</script>

方案3：Vue 3中绑定到响应式变量 #

如果使用Vue 3，可直接将DOM元素绑定到响应式变量，自动追踪变化并传递：

<!-- parent.vue -->
<template>
  <div :ref="el => target = el">target</div>
  <cmp :target="target" />
</template>

<script setup>
import { ref } from 'vue'
const target = ref(null)
</script>

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