Vue: Passar o componente para o slot nomeado aninhado dos netos resolverá no slot padrão.

Criado em 3 nov. 2017  ·  5Comentários  ·  Fonte: vuejs/vue

Versão

2.5.2

Link de reprodução

https://jsfiddle.net/daxchen/k75y6tu0/

Passos para reproduzir

Meu caso de uso é que tenho um layout padrão com barra de ferramentas e wrapper de conteúdo principal. Mas algumas páginas precisam de SearchBar e outras não, e os layouts podem ter níveis diferentes.

Então criei um componente chamado LayoutDefault como base para outros layouts usarem. E como desejo substituir a barra de ferramentas padrão quando necessário, coloquei a barra de ferramentas padrão em <slot name="toolbar"> , com Toolbar como conteúdo substituto.

Fragmento de código:

// LayoutDefault.vue
<slot name="toolbar">
  <Toolbar title="title from layout-inner">
    <slot name="toolbarSlot"></slot>
  </Toolbar>
</slot>

Eu faço esses tipos de componentes porque quero ser capaz de:

  1. Substitua a barra de ferramentas padrão, se necessário.
  2. Usando a barra de ferramentas padrão, mas passe as coisas para seu slot ( "toolbarSlot" no exemplo acima)

E então, em outros componentes de layout, eu faço o seguinte:

// LayoutLv1.vue
<div class="layout">
  <LayoutDefault>
    <slot name="toolbar" slot="toolbar"></slot>
    <slot name="toolbarSlot" slot="toolbarSlot"></slot>
    <slot>default content from Layout</slot>
  </LayoutDefault>
</div>

Como você pode ver, para passar componentes aos slots dos netos, usei este padrão: <slot name="foo" slot="foo"> .

Por algum motivo, os componentes passados ​​usando esse padrão serão passados ​​para o slot padrão, se houver.

Veja os exemplos 2, 3 e 4 na reprodução.

O que é esperado?

Espero que, quando nada for passado para um slot nomeado, o conteúdo de fallback será renderizado, com seus slots também.

O que realmente está acontecendo?

No exemplo 2, o Toolbar substituído é renderizado no slot padrão de LayoutDefault .

Nos exemplos 3 e 4, SearchBar é passado para slot="toolbarSlot" , mas não é renderizado.


Este é o comportamento esperado?
Ou se houver uma maneira de fazer esse tipo de layouts reutilizáveis ​​com cada peça padrão substituível e, se usar as peças padrão, ser capaz de passar componentes para seus slots (peças padrão)?

bug

Comentários muito úteis

btw isso já foi lançado em 2.5.3 :)

Todos 5 comentários

Wow isso é incrível!
Clonado, construído e testado, funciona !!
Evan você é o melhor ~~~
Muito obrigado!!!

btw isso já foi lançado em 2.5.3 :)

Isso também funciona com escopo de slot em 2.5.3? :)

@faragos aqui está como eu consegui passar slots para um neto que usa slot-scope.

https://jsfiddle.net/alexm/5hx43mb2/

@ alex-martinez obrigado por postar sua solução, foi uma grande ajuda :)

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

Questões relacionadas

aviggngyv picture aviggngyv  ·  3Comentários

paceband picture paceband  ·  3Comentários

fergaldoyle picture fergaldoyle  ·  3Comentários

loki0609 picture loki0609  ·  3Comentários

wufeng87 picture wufeng87  ·  3Comentários