Component interaction
Component interaction is about sharing data between components. This tutorial includes:
- Comprehensive view.
- Selecting an appropriate technique.
You can download the example code used in this topic on GitHub.
Comprehensive view
In Blazor Server, there are 3 techniques to share data between components:
CascadingParameter.Parameter.- Transfer service.
For each technique, there are some points of interest you need to understand:
- How to pass data from source to target.
- How to get feedback when the target changes data.
- Some common mistakes.
Selecting an appropriate technique
As you have seen, there are many techniques available for interacting components, which makes it difficult for people to select the most appropriate technique. In fact, every technique has its own purpose. Selecting an appropriate technique can be guided by understand your component tree.
CascadingParameter technique
CascadingParameter is used to pass data from the ancestor component to the descendant components. CascadingParameter can't pass data to sibling components. The following image illustrates the purpose of CascadingParameter:
Parameter technique
Parameter is used to pass data from the parent component to its direct child component. As same as CascadingParameter, Parameter can't pass data to sibling components. The following image illustrates the purpose of Parameter.
Transfer service technique
Transfer service is a good technique when you want all of your components to have one data source. Transfer service is not limited by the component tree, it can pass the data across all of your components in your website. The following image illustrates the purpose of Transfer service:
