Tutorials Blazor Architecture & Enterprise Patterns
Component Communication: Parameters, EventCallbacks, and CascadingValues
On this page
The Communication Tree
In Blazor, your UI is a tree of components. Passing data efficiently between them is the heart of a good architecture.
1. [Parameter] (Parent to Child)
Use the [Parameter] attribute to expose a property to a parent component. This is the primary way to pass data down the tree. Remember: Parameters should be considered 'Read Only' inside the child. If you need to change them, notify the parent instead of trying to mutate the parameter directly.
2. EventCallback (Child to Parent)
When something happens in a child component (like a button click), use an EventCallback to notify the parent. The parent can then handle the event and update its own state. @onchange="async e => await OnUserSelected.InvokeAsync(user)".
3. CascadingValues (Global Context)
Use <CascadingValue> to pass data down to the entire sub-tree without having to pass it through every single component manually. This is perfect for theme settings, user authentication info, or localization preferences.
4. Architect Insight
Q: "When should I avoid CascadingValues?"
Architect Answer: "Don't use them for high-frequency data updates. Every time a CascadingValue changes, every component that 'consumes' it must re-render, which can lead to performance lag across the whole UI. For specific, deeply nested updates, consider using a **State Container service** instead."