Vue: НСвозмоТно ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ имя слота Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° (createElement)

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 28 мая 2017  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: vuejs/vue

ΠšΠ°ΠΊΡƒΡŽ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ Ρ€Π΅ΡˆΠ°Π΅Ρ‚ эта функция?

Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ имя слота Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π°, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅:

return createElement(rootcmp, { default: [ createElement(childCmp) ], temp: [ createElement(childCmp2) ] } );

Как выглядит ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌΡ‹ΠΉ API?

Π’Π½ΡƒΡ‚Ρ€ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ имя слота, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Β«ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽΒ», Β«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' }) .

ВсС 3 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ createElement(childcmp, { slot: 'temp' }) .

@ yyx990803 yyx990803 Π΅ΡΡ‚ΡŒ Π»ΠΈ тСхничСская ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ Π΅ΡΡ‚ΡŒ? этот способ ΠΊΡ€Π°ΠΉΠ½Π΅ Π½Π΅ΠΏΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅Π½ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с рСкурсивно сгСнСрированными ΡƒΠ·Π»Π°ΠΌΠΈ Π² большом ΠΏΠ°ΠΊΠ΅Ρ‚Π΅, интСрСсно, Π΅ΡΡ‚ΡŒ Π»ΠΈ вСская ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΌΡ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ большСго успСха.

На самом Π΄Π΅Π»Π΅ это createElement(childcmp, { slot: 'temp' }) Π½Π΅ влияСт Π½Π° слот.

Π‘ΠΎΠ·Π΄Π°Π» ΠΎΡ‚Ρ‡Π΅Ρ‚ ΠΎΠ± ошибкС: https://github.com/vuejs/vue/issues/11519

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ