在渲染函数中指定插槽名称,如下所示:
return createElement(rootcmp, { default: [ createElement(childCmp) ], temp: [ createElement(childCmp2) ] } );
在渲染函数中,在创建子元素时指定插槽名称,例如“default”、“temp”。
return createElement(rootcmp, { default: [ createElement(childCmp) ], temp: [ createElement(childCmp2) ] } );
完整代码如下:
@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) ]);
}
}
预期行为:
<div>
Temp:<div>This is child</div>
Default:<div>This is child</div>
</div>
使用createElement(childcmp, { slot: 'temp' })
。
@yyx990803我们需要按原样进行是否有技术原因? 在处理大批量递归生成的节点时,这种方式非常不切实际,我想知道我们是否有任何理由不能做得更好。
实际上这createElement(childcmp, { slot: 'temp' })
对插槽没有影响。
创建了一个错误报告: https ://github.com/vuejs/vue/issues/11519
最有用的评论
使用
createElement(childcmp, { slot: 'temp' })
。