Svelte components communicate without store / props / context?
How do Svelte components communicate without store / props / context?
✨❓ Svelte Question Time ❓✨
"You have a Svelte question, I have an answer" 😱😍
Introduction 00:00
Sometimes, Svelte components need to communicate with each other, without using store, props, or context.
Examples 00:43
There are situations where the 2 components are not parent-child or siblings with each other. So, it does not make sense to communicate through props or context. The components may not be sharing the same data as well, so communicate through stores is out of the picture too.
An example of this, is in a e-commerce platform, where the 2 components are the shopping cart and an item card. The 2 components are not parent-child relationship, does not share the common parent (maybe except the root component). The 2 components do not share the same data, shopping cart uses cart data, and item card uses item data, (may have some commonalities, but they come from different API)
So, in this case, how would you notify the shopping cart, when you click "buy now" in an item card?
We are going to explore 2 approaches
1. Providing API to notify the component 04:53
2. Using Pub-Sub Pattern 13:03
🔗 REPL 1 https://svelte.dev/repl/507f3ca049494335899ef3d58296c830?version=3.38.2
🔗 REPL 2 https://svelte.dev/repl/4b7b07309ef3417c87a28c98933c13b9?version=3.38.2
---
🎧 Svelte Tutorial for Beginners https://www.youtube.com/playlist?list=PLoKaNN3BjQX3mxDEVG3oGJx2ByXnue_gR
🎧 Svelte Question Time https://www.youtube.com/playlist?list=PLoKaNN3BjQX1I9FmIoCaws4vUaoqezpc1
📚 Related Resources
Svelte https://svelte.dev
Svelte REPL https://svelte.dev/repl
🥰 Support me https://www.buymeacoffee.com/lihautan
🔗 Want to learn more from me? Check out these links:
Twitter: https://twitter.com/lihautan
Blog: https://lihautan.com/
Newsletter: https://lihautan.com/newsletter
#svelte #sveltequestiontime
Thanks for watching 🥰 -- with love, Li Hau
Видео Svelte components communicate without store / props / context? канала lihautan
✨❓ Svelte Question Time ❓✨
"You have a Svelte question, I have an answer" 😱😍
Introduction 00:00
Sometimes, Svelte components need to communicate with each other, without using store, props, or context.
Examples 00:43
There are situations where the 2 components are not parent-child or siblings with each other. So, it does not make sense to communicate through props or context. The components may not be sharing the same data as well, so communicate through stores is out of the picture too.
An example of this, is in a e-commerce platform, where the 2 components are the shopping cart and an item card. The 2 components are not parent-child relationship, does not share the common parent (maybe except the root component). The 2 components do not share the same data, shopping cart uses cart data, and item card uses item data, (may have some commonalities, but they come from different API)
So, in this case, how would you notify the shopping cart, when you click "buy now" in an item card?
We are going to explore 2 approaches
1. Providing API to notify the component 04:53
2. Using Pub-Sub Pattern 13:03
🔗 REPL 1 https://svelte.dev/repl/507f3ca049494335899ef3d58296c830?version=3.38.2
🔗 REPL 2 https://svelte.dev/repl/4b7b07309ef3417c87a28c98933c13b9?version=3.38.2
---
🎧 Svelte Tutorial for Beginners https://www.youtube.com/playlist?list=PLoKaNN3BjQX3mxDEVG3oGJx2ByXnue_gR
🎧 Svelte Question Time https://www.youtube.com/playlist?list=PLoKaNN3BjQX1I9FmIoCaws4vUaoqezpc1
📚 Related Resources
Svelte https://svelte.dev
Svelte REPL https://svelte.dev/repl
🥰 Support me https://www.buymeacoffee.com/lihautan
🔗 Want to learn more from me? Check out these links:
Twitter: https://twitter.com/lihautan
Blog: https://lihautan.com/
Newsletter: https://lihautan.com/newsletter
#svelte #sveltequestiontime
Thanks for watching 🥰 -- with love, Li Hau
Видео Svelte components communicate without store / props / context? канала lihautan
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
How to use Svelte store in .js file?Fixing Svelte issue #4767 - meta tag get svelte-xxx classname with :rootThe Super Mario Effect - Tricking Your Brain into Learning More | Mark Rober | TEDxPennFixing issue #6433 - Incorrect select value when using spreadHow to actually pass Svelte component through props?Svelte Tutorial for Beginners: Module contextTim Raderschad: Modern fetch in svelte using storesUndo / Redo with Svelte StoreHow to learn any language in six months | Chris Lonsdale | TEDxLingnanUniversityHow to use Svelte component inside a React app?Svelte Tutorial for Beginners - Component Events [1/2]Why do we need createEventDispatcher?Science Of PersuasionCSS Tricks - Inline Styles as Classes?Svelte Store: 3 tips to manage complex Svelte storeWhat Are APIs? - Simply ExplainedSvelte Tutorial for Beginners - Style your Svelte component [1/3]The first 20 hours -- how to learn anything | Josh Kaufman | TEDxCSUFixing issue #5907 - Disallowing multiple selectors inside :global()Svelte Tutorial for Beginners - Reactivity - Updating data in Svelte