Vue 使用 jsx 设置及获取 slot

父组件设置 slot

render(){
   const slotName = 'topbar' || 'default'
   const scopeSlotChild = this.$slots[slotName]
   
   return (
    <div> { scopeSlotChild } </div>
   )
    
}

父组件设置 slot-scope

render(){
    
    const scopedSlots = {
        // 默认插槽
        default: slotProps => [ <Cmp slotprops={slotprops} /> ],
        
        // 具名插槽
        footer:  slotProps => [ <Button slotprops={slotprops} /> ]
    
    }
    
}

子组件获取 slotProps

<parent 
    { ...{
         scopedSlots: {
            default: scope => {
                return <div>{this.scope.data}</div>
            }
         }
    }
>
</parent>

参考

• Scoped Slots in JSX

本文同步分享在 博客“直立猿”（JianShu）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。