Vue组件中如何传入带ref的插槽？访问ref为undefined的解决方案

这个问题的核心原因很明确：插槽内容是在父组件的作用域中渲染的，你在父组件插槽里定义的ref="inputTest"，会被注册到父组件的$refs对象上，而不是子组件的。所以子组件里调用this.$refs.inputTest自然会得到undefined。

下面给你两种可靠的解决方法：

方法一：通过作用域插槽传递注册函数（推荐） #

我们可以利用作用域插槽，让子组件提供一个注册ref的方法，父组件在插槽元素挂载后，把对应的DOM元素传递给子组件。

子组件代码 #

<template>
  <!-- 把注册ref的方法通过作用域插槽传给父组件 -->
  <slot name="test" :registerInputRef="registerInputRef"></slot>
</template>

<script>
export default {
  data() {
    return {
      // 用来存储插槽里的输入框元素
      inputTest: null
    }
  },
  methods: {
    registerInputRef(el) {
      this.inputTest = el
    }
  },
  mounted() {
    // 现在这里就能拿到输入框元素了
    console.log(this.inputTest)
  }
}
</script>

父组件代码 #

<template>
  <YourChildComponent>
    <!-- 使用slot-scope接收子组件传来的方法 -->
    <div slot="test" slot-scope="{ registerInputRef }">
      <!-- 用ref的回调写法，直接把元素传给子组件的注册方法 -->
      <input :ref="el => el && registerInputRef(el)">
    </div>
  </YourChildComponent>
</template>

这种方式逻辑清晰，而且能确保子组件在元素挂载完成后拿到正确的DOM引用。

方法二：父组件主动把ref传递给子组件（适合简单场景） #

如果你的场景比较简单，也可以直接在父组件里拿到ref后，通过子组件的方法或者props传递过去：

父组件代码 #

<template>
  <YourChildComponent ref="childComp">
    <div slot="test">
      <input ref="inputTest">
    </div>
  </YourChildComponent>
</template>

<script>
export default {
  mounted() {
    // 父组件拿到ref后，调用子组件的方法传递元素
    this.$refs.childComp.setInputRef(this.$refs.inputTest)
  }
}
</script>

子组件代码 #

<script>
export default {
  data() {
    return {
      inputTest: null
    }
  },
  methods: {
    setInputRef(el) {
      this.inputTest = el
      console.log(this.inputTest)
    }
  }
}
</script>

这种方式虽然直接，但需要确保父组件的$refs已经初始化完成，一般在mounted钩子中执行是安全的。

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