Vue结合JSX开发时如何给默认插槽传递自定义属性myProp？

首先明确核心逻辑：SFC 模板里写的 <slot myProp="myProp"></slot> 本质不是一个静态标签，而是把传入插槽的属性打包成参数，调用对应插槽的渲染函数，返回插槽内容的 VNode。之前直接渲染 this.$slots.default 是静态插槽的基础写法，没法传递自定义属性，正确做法是直接调用插槽函数、把需要传递的属性作为实参传入。

• 默认插槽传参的通用写法：

  <div>
    {this.$slots.default?.({ myProp: 'myProp' })}
  </div>
  

  这行代码和你写的 SFC 插槽渲染逻辑完全等价：父组件通过插槽接收到的作用域属性，就是传入函数的这个对象的所有键值。
• 可选链 ?. 是必加判断：如果父组件没有给这个组件传入默认插槽，this.$slots.default 是 undefined，不加判断直接调用会直接抛出运行时错误。
• 不同 Vue 版本的适配说明：
  • Vue3 版本已经取消了独立的 $scopedSlots，所有插槽统一挂在 $slots 上作为可调用函数，上述写法可以直接正常运行。
  • Vue2 早期版本里，无参数的静态插槽存在 this.$slots 上，带作用域的动态插槽存在 this.$scopedSlots 上。从 Vue2.6 开始官方做了插槽逻辑统一，$scopedSlots 会聚合所有静态、动态插槽，所以最稳妥的 Vue2 写法是调用 $scopedSlots 上的方法：

    <div>
      {this.$scopedSlots.default?.({ myProp: 'myProp' })}
    </div>
    

• 具名插槽的传参逻辑和默认插槽完全一致，比如要给名为 footer 的插槽传自定义属性，只要取到对应插槽函数调用即可：

  <div>
    {this.$scopedSlots.footer?.({ confirmText: '确定', cancelText: '取消' })}
  </div>
  

• 不要尝试给已经渲染完成的插槽 VNode 手动绑定属性，这种方式不会触发父组件的插槽作用域更新，逻辑完全不通。
• 调用插槽函数时传入的对象键名，和 SFC 里 <slot> 标签上写的属性名完全一一对应，不需要额外做语法包装。

注意：如果使用的是支持 Vue JSX 编译的官方插件，不需要额外的编译配置，上述写法可以直接被正确解析为带作用域的插槽渲染逻辑。

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