Especifique o nome do slot na função de renderização como abaixo:
return createElement(rootcmp, { default: [ createElement(childCmp) ], temp: [ createElement(childCmp2) ] } );
De dentro da função de renderização, especifique o nome do slot, como 'default', 'temp' ao criar elementos filho.
return createElement(rootcmp, { default: [ createElement(childCmp) ], temp: [ createElement(childCmp2) ] } );
Código completo abaixo:
@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) ]);
}
}
Comportamento esperado:
<div>
Temp:<div>This is child</div>
Default:<div>This is child</div>
</div>
Use createElement(childcmp, { slot: 'temp' })
.
@yyx990803 existe uma razão técnica pela qual precisamos continuar como está? desta forma é altamente impraticável ao lidar com nós gerados recursivamente em um grande lote, gostaria de saber se há alguma boa razão para não podermos fazer melhor.
Na verdade, este createElement(childcmp, { slot: 'temp' })
não tem efeito em um slot.
Criou um relatório de bug: https://github.com/vuejs/vue/issues/11519
Comentários muito úteis
Use
createElement(childcmp, { slot: 'temp' })
.