Vue: Pasar el componente al espacio con nombre anidado de los nietos se resolverá en el espacio predeterminado.

Creado en 3 nov. 2017  ·  5Comentarios  ·  Fuente: vuejs/vue

Versión

2.5.2

Enlace de reproducción

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

pasos para reproducir

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:

  1. Reemplace la barra de herramientas predeterminada si es necesario.
  2. Usando la barra de herramientas predeterminada, pero pase cosas a su ranura ( "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.

¿Lo que es esperado?

Espero que cuando no se pase nada a una ranura con nombre, el contenido de reserva se procese, con sus ranuras también.

¿Qué está pasando realmente?

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)?

bug

Comentario más útil

por cierto, esto ya está disponible en 2.5.3 :)

Todos 5 comentarios

¡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.

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

@ alex-martinez gracias por publicar su solución, fue de gran ayuda :)

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

seemsindie picture seemsindie  ·  3Comentarios

julianxhokaxhiu picture julianxhokaxhiu  ·  3Comentarios

fergaldoyle picture fergaldoyle  ·  3Comentarios

gkiely picture gkiely  ·  3Comentarios

paceband picture paceband  ·  3Comentarios