Скачать или смотреть 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/507f3ca049494...
🔗 REPL 2 https://svelte.dev/repl/4b7b07309ef34...

---

🎧 Svelte Tutorial for Beginners    • Svelte Tutorial for Beginners  
🎧 Svelte Question Time    • Svelte Question Time  

📚 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:   / lihautan  
Blog: https://lihautan.com/
Newsletter: https://lihautan.com/newsletter


#svelte #sveltequestiontime


Thanks for watching 🥰 -- with love, Li Hau