mind1n
mind1n

Reputation: 1206

How to render children into specified named slot in VueJs?

Refer to the code below, currently all the children were rendered inside the default slot even though the slot name is given.

Not sure whether vue createElement function supports named slot?

@Component({
    props:[]
})
export class TestComponent extends Widget{
    items:any[];
    render(h:any){
        const rootcmp = {
            template:`<div>
                Temp:<slot name="temp"></slot>
                Default:<slot></slot>
            </div>`
            , data:()=>{
                return {};
            }
        }
        const cmp = {
            template:'<div slot="default">This is child</div>'
            , data:()=>{
                return {};
            }
        }
        const cmp2 = {
            template:'<div slot="temp">This is child</div>'
            , data:()=>{
                return {};
            }
        }
        return h(rootcmp, [h(cmp), h(cmp2)]);
    }
}

Current behavior:

<div>
Temp:Default:
<div>This is child</div>
<div>This is child</div>
</div>

Expected behavior:

<div>
Temp:
<div>This is child</div>
Default:
<div>This is child</div>
</div>

Upvotes: 6

Views: 1255

Answers (1)

Screll
Screll

Reputation: 286

It sure does, in your options object, try {slot:'slot-name'}

Upvotes: 1

Related Questions