2.5.2
https://jsfiddle.net/daxchen/k75y6tu0/
Mi caso de uso es que tengo un diseño predeterminado con la barra de herramientas y el contenedor de contenido principal. Pero algunas páginas necesitan un SearchBar
y otras no, y los diseños pueden tener diferentes niveles.
Así que creé un componente llamado LayoutDefault
como base para que lo usen otros diseños. Y como quiero poder reemplazar la barra de herramientas predeterminada cuando sea necesario, puse la barra de herramientas predeterminada en <slot name="toolbar">
, con Toolbar
como contenido de reserva.
Fragmento de código:
// LayoutDefault.vue
<slot name="toolbar">
<Toolbar title="title from layout-inner">
<slot name="toolbarSlot"></slot>
</Toolbar>
</slot>
Hago este tipo de componentes porque quiero poder:
"toolbarSlot"
en el ejemplo anterior)Y luego, en otros componentes de diseño, hago esto:
// 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 puede ver, para pasar componentes a las ranuras del nieto, utilicé este patrón: <slot name="foo" slot="foo">
.
Por alguna razón, los componentes pasados usando este patrón se pasarán a la ranura predeterminada si hay una.
Vea los ejemplos 2, 3 y 4 en la reproducción.
Espero que cuando no se pase nada a una ranura con nombre, el contenido de reserva se procese, con sus ranuras también.
En el ejemplo 2, el Toolbar
reemplazado se representa en el espacio predeterminado de LayoutDefault
.
En los ejemplos 3 y 4, SearchBar
se pasa a slot="toolbarSlot"
, pero no se procesa.
¿Es este el comportamiento esperado?
¿O si hay una manera de hacer este tipo de diseños reutilizables con cada parte predeterminada reemplazable, y si uso las partes predeterminadas, poder pasar componentes a sus ranuras (partes predeterminadas)?
¡Guau eso es increible!
¡Clonado, construido y probado, funciona !
Evan eres el mejor ~~~
¡¡¡Muchas gracias!!!
por cierto, esto ya está disponible en 2.5.3 :)
¿Esto también funciona con slot-scope en 2.5.3? :)
@faragos , así es como logré pasar ranuras a un nieto que usa ranura de alcance.
@ alex-martinez gracias por publicar su solución, fue de gran ayuda :)
Comentario más útil
por cierto, esto ya está disponible en 2.5.3 :)