Geben Sie den Slot-Namen in der Renderfunktion wie folgt an:
return createElement(rootcmp, { default: [ createElement(childCmp) ], temp: [ createElement(childCmp2) ] } );
Geben Sie in der Renderfunktion den Slot-Namen an, z. B. „Standard“, „Temp“, wenn Sie untergeordnete Elemente erstellen.
return createElement(rootcmp, { default: [ createElement(childCmp) ], temp: [ createElement(childCmp2) ] } );
Vollständiger Code unten:
@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) ]);
}
}
Erwartetes Verhalten:
<div>
Temp:<div>This is child</div>
Default:<div>This is child</div>
</div>
Verwenden Sie createElement(childcmp, { slot: 'temp' })
.
@yyx990803 Gibt es einen technischen Grund, warum wir so weitermachen müssen? Dieser Weg ist sehr unpraktisch, wenn es um rekursiv generierte Knoten in einem großen Stapel geht. Ich frage mich, ob es einen guten Grund gibt, warum wir es nicht besser machen können.
Eigentlich hat dieses createElement(childcmp, { slot: 'temp' })
keine Auswirkung auf einen Slot.
Fehlerbericht erstellt: https://github.com/vuejs/vue/issues/11519
Hilfreichster Kommentar
Verwenden Sie
createElement(childcmp, { slot: 'temp' })
.