Maxim-Filimonov
Handling events in parents live components
Hi,
Coming from React I’ve been a bit struggling to understand how to structure and handle live component events.
To give a specific example I have two live components.
FileUploadlive component which presents a dialog for the user to upload filesFileslive component which wrapsFileUploadand converts file to appropriate structure to attach to the parent entity.
What I’m trying to do seems to be relatively simple - I want theFileUploadcomponent to call a handler passed to it with a list of uploaded files. That handler is in theFilescomponent.
I’m aware of the fact that I can usesendandhandle_infoin the main parent LV. But in this scenario, I don’t want LV to handle this communication and let those components handle it.
I am looking at it in the wrong way?
Most Liked
APB9785
I haven’t noticed any performance issues in testing. And I use PubSub for many things, not just file uploads; also live updates for user profiles and comments and such.
If I didn’t need to keep the other users up-to-date, I would just use send(self(), message) (the parent LV is always the source of truth). But PubSub covers both bases.
APB9785
Have you seen Phoenix.LiveComponent - Targeting Component Events? If your components are the source of truth in your app, and you don’t want to involve the parent LV with handling the event, it looks like you can target another component and even multiple components by passing their DOM id(s) to phx-target.
I’m not too familiar with this because in my apps I prefer the parent LV to be the source of truth for almost everything. But maybe it could work for your use case?
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Catch errors, track performance, monitor hosts and more.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"