Vue: Característica: contenido de reserva para parciales

Creado en 11 abr. 2016 · 3Comentarios · Fuente: vuejs/vue

Los parciales deben admitir contenido de respaldo, al igual que lo hacen las tragamonedas. Esto mejoraría enormemente la legibilidad de las plantillas al usarlas de una manera específica:
Hay un componente base con cierta lógica (por ejemplo, un diálogo), del cual se deben derivar otros componentes (por ejemplo, un PromptDialog) que comparten la misma lógica y plantilla (externa). Esto se logra mediante el uso de parciales similares a los que se usan en las ranuras, pero sobre la base de componentes y no con instancias.
Tal plantilla se vería así:

<div>
  <div class="header">
    <partial name="header">
      <i class="fa-whatever"></i>
      {{title}}
    </partial>
  </div>
  <div class="body">
    <partial name="body">
      {{{body}}}
    </partial>
  </div>
  <div class="footer">
    <partial name="footer">
      <!-- some stuff for button rendering -->
    </partial>
  </div>
</div>

Sin esta función, necesito colocar el contenido de todos los nodos parciales fuera de la plantilla, y empeora con los parciales anidados.
Abordar los problemas utilizando el componente base en la plantilla de los derivados; por lo tanto, tener instancias anidadas no es práctico, porque necesitaría redirigir la mayoría de los datos / accesorios y API desde el exterior (pseudo derivado) al interior. instancia (base).

Fuente

bfis

Comentario más útil

Yo diría que eso es abusar de los parciales. Es una mala idea hacer esto porque sus fragmentos parciales son del padre, aunque conocen el contexto de datos del hijo. Este es un desacoplamiento estrecho.

El componente de diálogo no debe tener ningún estado propio porque es puramente presentacional. No transmita el estado. Tanto el estado como el contenido mostrado deben pertenecer al componente principal que usa el diálogo.

yyx990803 en 11 abr. 2016

👍2

Todos 3 comentarios

Lo siento, no entendí por qué usar una ranura en lugar de una parcial no es una opción: sweat_smile:
¿Hay alguna razón para eso?

posva en 11 abr. 2016

👍1

Al usar ranuras, un _PromptDialog_ pseudo derivado tendría la siguiente plantilla.

<dialog
  :foo.sync="foo"
  >
  <input
    v-model="thePromptedValue"
    slot="body"
    >
</dialog>

Para cada atributo _foo_ en el componente _Dialog_ original, necesitaría tener el mismo atributo en el _PromptDialog_ externo y pasarlo al interno. Lo mismo ocurre con todos los métodos definidos en _Dialog_: necesito definir proxies que pasen la llamada al interno. Esto es molesto y anula la idea detrás de la herencia de extensión / clase de componente.

bfis en 11 abr. 2016

yyx990803 en 11 abr. 2016

👍2

¿Fue útil esta página

0 / 5 - 0 calificaciones