Problem
I am developing a complex blazor page (with a svg editor, image selector, image annotation editor, etc.)
So I decided to split the page content into many blazor components (eg. ImageSelectorComponent
, ImageEditorComponent
and CurrentImageInformationComponent
)
But what is the best way to connect them to each other?
For example, I select an image in the ImageSelector, I need to load a new image source from my api and put it in the ImageEditorComponet and I have to update the CurrentImageInformationComponent.
My ideas
First - I can use binding. For example, I can use a property SelectedImageId and bind all Components to it. But this is not very performant and it causes some errors (sometimes, the view does not update even though the bound variable has changed)
Another idea: Create an ViewModel, which holds all properties and methods for the hole page. Then bind the ViewModel to all components. This doesn't seem like good style to me...
My question
What is the best practice for complex pages in blazor? Should I use small components, and if so, how should they be connected to each other?