Vue3迁移：render函数中无法访问嵌套组件插槽问题求助

问题根源 #

Vue3对插槽的语法和内部实现做了两处关键变更，导致你原有的Vue2写法失效：

1. 命名插槽传递语法废弃
   Vue2里通过slot="cont"属性指定命名插槽的方式，在Vue3中已被彻底移除。在JSX/render函数场景下，必须使用v-slots指令或直接传递slots对象来传递命名插槽，否则子组件无法识别到对应插槽内容。

2. $slots结构变更
   Vue2中this.$slots.xxx是返回VNode的函数，需要调用()获取内容；但Vue3中this.$slots.xxx直接就是VNode数组，无需调用——你之前的this.$slots.cont()写法相当于调用一个数组，自然会得到undefined。

修复后的代码 #

父组件render函数修正 #

把旧的slot属性写法改为v-slots传递插槽：

render() {
  return (
    <my-component v-slots={{
      cont: () => <div ref="cont">content</div>
    }} />
  )
}

或者直接传递slots属性的写法：

render() {
  const slots = {
    cont: () => <div ref="cont">content</div>
  }
  return <my-component slots={slots} />
}

子组件render函数修正 #

直接使用this.$slots.cont（无需调用）：

render() {
  return (
    <div>
      {this.$slots.cont}
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Dr. Junior