Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Vue - Composing Components
Vue Composing Components | @vannsl
Vue Composing Components | @vannsl
github.com/myposter-de/vue-composing-components
Vue Composing Components | @vannsl
Let me tell you a story…
Vue Composing Components | @vannsl
Let me tell you a story…
…about CTA Buttons
Vue Composing Components | @vannsl
Vue Composing Components | @vannsl
Vue Composing Components | @vannsl
Vue Composing Components | @vannsl
months later…
Vue Composing Components | @vannsl
Relaunch / Redesign
Vue Composing Components | @vannsl
Vue Composing Components | @vannsl
Component CTA.vue
Vue Composing Components | @vannsl
Vue Composing Components | @vannsl
CTA.vue - template
Vue Composing Components | @vannsl
CTA.vue - script
Vue Composing Components | @vannsl
Parent component
Vue Composing Components | @vannsl
one week later…
Vue Composing Components | @vannsl
one week later…
Vue Composing Components | @vannsl
🤔
CTA.vue
Vue Composing Components | @vannsl
CTA.vue
CTAGhost.vue
😁
Vue Composing Components | @vannsl
DRY
😭
Vue Composing Components | @vannsl
Vue Composing Components | @vannsl
Vue Composing Components | @vannsl
LIVE DEMO
Oh no, oh no, oh no….
Code
Reusability
Vue Composing Components | @vannsl
Tools:
Extend
Mixins
(Scoped) Slots
Vue Composing Components | @vannsl
Vue Extend
😐
Vue Composing Components | @vannsl
Vue Composing Components | @vannsl
DON’T do this
Extend
Vue Composing Components | @vannsl
Vue Mixins
😍
Vue Composing Components | @vannsl
Vue Composing Components | @vannsl
Mixin - cta-mixin.vue
Vue Composing Components | @vannsl
Mixin - Cta.vue
Mixins - Merging & Overlapping
Vue Composing Components | @vannsl
Vue Composing Components | @vannsl
Box with CTA.vue Component Box with CTAGhost.vue Component
Box.vue BoxGhost.vue
Vue Composing Components | @vannsl
DRY
😭
Vue Composing Components | @vannsl
Vue Slots
😍
Vue Composing Components | @vannsl
Vue Composing Components | @vannsl
Child: Box.vue
Vue Composing Components | @vannsl
Parent: MixinSlotWrapper.vue
Vue Composing Components | @vannsl
Parent: MixinSlotWrapper.vue Child: Box.vue
Slots
• Named Slots
Vue Composing Components | @vannsl
Slots
• Named Slots 

• Default Content
Vue Composing Components | @vannsl
Next time:
Renderless Components via
Vue Scoped Slots
😍😍😍
Vue Composing Components | @vannsl
More Tools:
Directives
Plugins
Filter
Vue Composing Components | @vannsl
Thanks 🙏
Vue Composing Components | @vannsl
Renderless Components via
Vue Scoped Slots
😍😍😍
Vue Composing Components | @vannsl
Vue Composing Components | @vannsl
Child: Todos.vue Parent
Vue Composing Components | @vannsl
Child: RenderlessTodos.vue Parent
Nächste SlideShare
Wird geladen in …5
×

Vue - Composing Components

279 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

×