Π£ΠΊΠ°ΠΆΠΈΡΠ΅ ΠΈΠΌΡ ΡΠ»ΠΎΡΠ° Π² ΡΡΠ½ΠΊΡΠΈΠΈ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π°, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅:
return createElement(rootcmp, { default: [ createElement(childCmp) ], temp: [ createElement(childCmp2) ] } );
ΠΠ½ΡΡΡΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° ΡΠΊΠ°ΠΆΠΈΡΠ΅ ΠΈΠΌΡ ΡΠ»ΠΎΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Β«ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡΒ», Β«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 yyx990803 Π΅ΡΡΡ Π»ΠΈ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠ°Ρ ΠΏΡΠΈΡΠΈΠ½Π°, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ Π΅ΡΡΡ? ΡΡΠΎΡ ΡΠΏΠΎΡΠΎΠ± ΠΊΡΠ°ΠΉΠ½Π΅ Π½Π΅ΠΏΡΠ°ΠΊΡΠΈΡΠ΅Π½ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΡΠ΅ΠΊΡΡΡΠΈΠ²Π½ΠΎ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΡΠ·Π»Π°ΠΌΠΈ Π² Π±ΠΎΠ»ΡΡΠΎΠΌ ΠΏΠ°ΠΊΠ΅ΡΠ΅, ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, Π΅ΡΡΡ Π»ΠΈ Π²Π΅ΡΠΊΠ°Ρ ΠΏΡΠΈΡΠΈΠ½Π°, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΌΡ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΠΎΠ±ΠΈΡΡΡΡ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΡΡΠΏΠ΅Ρ Π°.
ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΡΠΎ createElement(childcmp, { slot: 'temp' })
Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΡΠ»ΠΎΡ.
Π‘ΠΎΠ·Π΄Π°Π» ΠΎΡΡΠ΅Ρ ΠΎΠ± ΠΎΡΠΈΠ±ΠΊΠ΅: https://github.com/vuejs/vue/issues/11519
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅
createElement(childcmp, { slot: 'temp' })
.