Vue: Não é possível especificar o nome do slot dentro da função de renderização (createElement)

Criado em 28 mai. 2017  ·  3Comentários  ·  Fonte: vuejs/vue

Qual problema esse recurso resolve?

Especifique o nome do slot na função de renderização como abaixo:

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

Como é a API proposta?

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>

Comentários muito úteis

Use createElement(childcmp, { slot: 'temp' }) .

Todos 3 comentários

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

Esta página foi útil?
0 / 5 - 0 avaliações