Creación dinámica de componentes en VueJs

Problema

  • El sistema tiene comportamientos diferentes según determinadas condiciones.
  • El caso típico es que muchos componentes se comportan distinto, si la plataforma es slack o Handgouts.
  • En el futuro se debe poder añadir nuevas plataformas con el mínimo impacto en el código.

Slack

Handgouts

<AddUser
 v-if="platform == 'slack'"
 :membersPlatform="membersPlatform"
 v-model="form.members"
></AddUser>

<AddUserHandgouts
 v-if="platform == 'handgouts'"
 :membersPlatform="membersPlatform"
 v-model="form.members"
></AddUserHandgouts>
<AddUser
 v-if="platform == 'slack'"
 :membersPlatform="membersPlatform"
 v-model="form.members"
></AddUser>

<AddUserHandgouts
 v-if="platform == 'handgouts'"
 :membersPlatform="membersPlatform"
 v-model="form.members"
></AddUserHandgouts>

¿Qué pasa cuando tengamos 10 plataformas?

Patrones de diseño

  • Plantilla: Son clases o componentes que tienen la funcionalidad general y definene espacios que pueden ser reemplazados con el funcionamiento concreto en cada caso.
  • Fábrica: Los objetos de fabricación (fábricas) tienen la responsabilidad de crear instancias de objetos de otras clases. Tienen además la responsabilidad y el conocimiento necesario para encapsular la forma en que se crean determinados tipos de objetos en una aplicación.

Contrato

Fábrica

Componente 1

Componente 2

Componente  N

Creación dinámica de componentes en Vuejs

By product@dailybot.com

Made with Slides.com

Creación dinámica de componentes en Vuejs

  • 1,056

More from product@dailybot.com