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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。