2.5.2
https://jsfiddle.net/daxchen/k75y6tu0/
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:
"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.
Espero que, quando nada for passado para um slot nomeado, o conteúdo de fallback será renderizado, com seus slots também.
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)?
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.
@ alex-martinez obrigado por postar sua solução, foi uma grande ajuda :)
Comentários muito úteis
btw isso já foi lançado em 2.5.3 :)