Vue3无渲染组件中如何向默认插槽传递Ref？

嘿，我太懂你碰到的这个困扰了！其实核心原因很明确：插槽函数接收的props里的ref并不会自动绑定到插槽内的元素上——Vue不会做这种隐式关联，得咱们手动处理，完全不需要用div或者其他元素包裹插槽内容~

具体解决方案 #

你只需要分两步操作：

1. 在无渲染组件中，把你的ref作为一个命名prop传递给插槽函数

   // 无渲染组件的setup逻辑
   setup(props, { slots }) {
     const someRef = ref(null)
     // 把ref以清晰的命名（比如elementRef）传给插槽
     return () => slots.default({ elementRef: someRef })
   }
   

2. 在使用这个无渲染组件时，在插槽内容里显式地把接收到的ref绑定到目标元素上

   <MyRenderlessComponent>
     <template #default="{ elementRef }">
       <!-- 这里直接把ref绑定到你需要的元素上 -->
       <input :ref="elementRef" placeholder="测试一下" />
     </template>
   </MyRenderlessComponent>
   

为什么之前的写法不生效？ #

你之前尝试的slots.default({ ref: someRef })或者slots.default({ someRef })没用，是因为：

• 插槽本质是返回VNode的函数，你传递的参数只是普通数据，Vue不会自动把这些参数当成元素属性去绑定
• 元素的ref属性必须显式声明才能关联到对应的ref对象，这是Vue的设计逻辑，避免隐式绑定带来的混乱

这样操作后，你既不用额外包裹元素，又能让无渲染组件的ref和插槽内的目标元素顺利关联起来啦！

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