More Slides Using Ionic VueJS, SwiperJS and Tiny-Emitter Creating A Custom Event-Bus
More Slides Using Ionic VueJS, SwiperJS and Tiny-Emitter Creating A Custom Event-Bus
#ionic #vuejs #tutorial
We are combining two questions I saw this week, that I thought would make for a great video
1) How to emit events, create an event-bus in vue3
2) How to have parent component sent events to child component in vuejs.
Taking the Slides Demo from the earlier video [ • Creating Slides with Ionic VueJS - A... ] and create a way for the Slides Component to listen for an event to tell it to change what slide it is on... This decouples the slide component from being tightly integrated with its parent in many ways.
💥 BONUS SAMPLE CODE 💥
The library I used in tiny-emitter, the link is below, See a simple eventbus built using composition API here - https://codesandbox.io/s/quirky-minsk...
💥 CHAPTERS 💥
00:00 Intro
01:23 - Adding Tiny-Emitter to Application
02:41 - Make all slide options get set by Parent Component
03:59 - Put Buttons in Parent Component, when I click, send an event to slide component to change slides
05:43 - List for Events to Change Slides in the Slide Component
06:58 - Emit Events When Buttons Clicked from Parent Component for the Slides Component to Listen To
08:42 - Respond To Events and Call SwiperJS API to Change Slides
09:28 - Enable and disable Parent Button By Listening for Events from Slide Component
10:54 - Add Event Handler Properties to MySlides Component
13:26 - Using Vue DevTools to See Events
💥 VUE JS PLAYLIST 💥
- • Vue 3 Ionic Videos
💥 LINKS 💥
- tiny-emitter: https://github.com/scottcorgan/tiny-e...
- swiper: https://swiperjs.com/
💥 NEWSLETTER 💥
- https://buff.ly/35bAMIf
💥 SOCIAL MEDIA 💥
Twitter - / aaronksaunders
LinkedIn - / aaronksaunders
GitHub - https://github.com/aaronksaunders
Blog - https://dev.to/aaronksaunders
#ionic #vuejs #tutorial #javascript #ionicframework #vue #compositionapi #capacitor #vuejs #firebase #vue3 #vuejs3 #tinyemitter
~-~~-~~~-~~-~
Please watch: "Getting Started With Appwrite, Vue JS Ionic Framework & Capacitor"
• Ionic Vue, Getting Started With Appwrite
~-~~-~~~-~~-~
