Vue: Not able to specify slot name inside render function (createElement)

Created on 28 May 2017  ·  3Comments  ·  Source: vuejs/vue

What problem does this feature solve?

Specify slot name within render function like below:

return createElement(rootcmp, { default: [ createElement(childCmp) ], temp: [ createElement(childCmp2) ] } );

What does the proposed API look like?

From within the render function, specify the slot name such as 'default', 'temp' when creating child elements.

return createElement(rootcmp, { default: [ createElement(childCmp) ], temp: [ createElement(childCmp2) ] } );

Full code below:

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

Expected behavior:

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

Most helpful comment

Use createElement(childcmp, { slot: 'temp' }).

All 3 comments

Use createElement(childcmp, { slot: 'temp' }).

@yyx990803 is there a technical reason why we need to proceed as is ? this way is highly unpractical when dealing with recursively generated nodes in a large batch, i wonder if there's any good reason why we can't do better.

Actually this createElement(childcmp, { slot: 'temp' }) has no effect on a slot.

Created a bug report: https://github.com/vuejs/vue/issues/11519

Was this page helpful?
0 / 5 - 0 ratings

Related issues

guan6 picture guan6  ·  3Comments

6pm picture 6pm  ·  3Comments

julianxhokaxhiu picture julianxhokaxhiu  ·  3Comments

aviggngyv picture aviggngyv  ·  3Comments

wufeng87 picture wufeng87  ·  3Comments