Specify slot name within render function like below:
return createElement(rootcmp, { default: [ createElement(childCmp) ], temp: [ createElement(childCmp2) ] } );
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>
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
Most helpful comment
Use
createElement(childcmp, { slot: 'temp' })
.