Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Vue - Composing Components

268 visualizaciones

Publicado el

Meetup Talk by Vanessa Böhner about Vue - Composing Components

Publicado en: Tecnología
  • Sé el primero en comentar

Vue - Composing Components

  1. 1. Vue - Composing Components Vue Composing Components | @vannsl
  2. 2. Vue Composing Components | @vannsl github.com/myposter-de/vue-composing-components
  3. 3. Vue Composing Components | @vannsl Let me tell you a story…
  4. 4. Vue Composing Components | @vannsl Let me tell you a story… …about CTA Buttons
  5. 5. Vue Composing Components | @vannsl
  6. 6. Vue Composing Components | @vannsl
  7. 7. Vue Composing Components | @vannsl
  8. 8. Vue Composing Components | @vannsl
  9. 9. months later… Vue Composing Components | @vannsl
  10. 10. Relaunch / Redesign Vue Composing Components | @vannsl
  11. 11. Vue Composing Components | @vannsl
  12. 12. Component CTA.vue Vue Composing Components | @vannsl
  13. 13. Vue Composing Components | @vannsl CTA.vue - template
  14. 14. Vue Composing Components | @vannsl CTA.vue - script
  15. 15. Vue Composing Components | @vannsl Parent component
  16. 16. Vue Composing Components | @vannsl one week later…
  17. 17. Vue Composing Components | @vannsl one week later…
  18. 18. Vue Composing Components | @vannsl 🤔 CTA.vue
  19. 19. Vue Composing Components | @vannsl CTA.vue CTAGhost.vue 😁
  20. 20. Vue Composing Components | @vannsl
  21. 21. DRY 😭 Vue Composing Components | @vannsl
  22. 22. Vue Composing Components | @vannsl
  23. 23. Vue Composing Components | @vannsl LIVE DEMO Oh no, oh no, oh no….
  24. 24. Code Reusability Vue Composing Components | @vannsl
  25. 25. Tools: Extend Mixins (Scoped) Slots Vue Composing Components | @vannsl
  26. 26. Vue Extend 😐 Vue Composing Components | @vannsl
  27. 27. Vue Composing Components | @vannsl DON’T do this Extend
  28. 28. Vue Composing Components | @vannsl
  29. 29. Vue Mixins 😍 Vue Composing Components | @vannsl
  30. 30. Vue Composing Components | @vannsl Mixin - cta-mixin.vue
  31. 31. Vue Composing Components | @vannsl Mixin - Cta.vue
  32. 32. Mixins - Merging & Overlapping Vue Composing Components | @vannsl
  33. 33. Vue Composing Components | @vannsl Box with CTA.vue Component Box with CTAGhost.vue Component
  34. 34. Box.vue BoxGhost.vue Vue Composing Components | @vannsl
  35. 35. DRY 😭 Vue Composing Components | @vannsl
  36. 36. Vue Slots 😍 Vue Composing Components | @vannsl
  37. 37. Vue Composing Components | @vannsl Child: Box.vue
  38. 38. Vue Composing Components | @vannsl Parent: MixinSlotWrapper.vue
  39. 39. Vue Composing Components | @vannsl Parent: MixinSlotWrapper.vue Child: Box.vue
  40. 40. Slots • Named Slots Vue Composing Components | @vannsl
  41. 41. Slots • Named Slots • Default Content Vue Composing Components | @vannsl
  42. 42. Next time: Renderless Components via Vue Scoped Slots 😍😍😍 Vue Composing Components | @vannsl
  43. 43. More Tools: Directives Plugins Filter Vue Composing Components | @vannsl
  44. 44. Thanks 🙏 Vue Composing Components | @vannsl
  45. 45. Renderless Components via Vue Scoped Slots 😍😍😍 Vue Composing Components | @vannsl
  46. 46. Vue Composing Components | @vannsl Child: Todos.vue Parent
  47. 47. Vue Composing Components | @vannsl Child: RenderlessTodos.vue Parent

×