如何在子组件中获取父组件的ref？传递元素Prop为null的解决办法

问题出在Vue的refs初始化时机：模板渲染时，组件还未完成挂载，$refs.button此时还未被赋值，所以直接传给子组件会拿到null。

下面是两种可行的解决方式：

方法一：通过data属性+mounted钩子延迟赋值（Vue2/Vue3通用） #

在父组件中定义一个响应式变量，等组件挂载完成、refs赋值后，再把元素赋值给这个变量，最后传递给子组件：

<template>
  <button ref="button">Button</button>
  <child :element="buttonElement" />
</template>

<script>
// Vue2写法
export default {
  data() {
    return {
      buttonElement: null
    }
  },
  mounted() {
    // 用$nextTick确保DOM完全渲染完成，refs已赋值
    this.$nextTick(() => {
      this.buttonElement = this.$refs.button
    })
  }
}
</script>

方法二：Vue3中使用响应式ref+watch监听 #

如果是Vue3的<script setup>语法，可以直接监听ref的变化，自动同步给子组件：

<template>
  <button ref="buttonRef">Button</button>
  <child :element="buttonElement" />
</template>

<script setup>
import { ref, watch } from 'vue'

const buttonRef = ref(null)
const buttonElement = ref(null)

// 监听buttonRef的变化，一旦有值就同步给buttonElement
watch(buttonRef, (newElement) => {
  if (newElement) {
    buttonElement.value = newElement
  }
}, { immediate: true })
</script>

核心逻辑就是：必须等待父组件挂载完成、DOM渲染完毕，refs对应的元素被正确赋值后，再把元素传递给子组件，这样子组件就能拿到有效的DOM元素了。

内容的提问来源于stack exchange，提问作者World's famous people