You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>In Blazor, passing parameters between components is a fundamental technique for component communication, particularly from parent to child. This tutorial will guide you through passing a parameter to another component and then receiving the update notification when the parameter changes. We will cover:</p>
3
+
<ul>
4
+
<li>Passing a parameter to a child component.</li>
5
+
<li>What is parameter change notification?</li>
6
+
<li>Passing a parameter and notifying the parent with <code>@bind-*</code>.</li>
7
+
<li>Advanced techniques with <code>@bind-*</code>.</li>
8
+
<li>Passing a parameter and notifying the parent with <code>EventCallback</code>.</li>
9
+
</ul>
10
+
<hrclass="my-4" />
11
+
<h1>Passing a Parameter to a Child Component</h1>
12
+
<ol>
13
+
<li>Declare the parameter in the child using the <code>[Parameter]</code> attribute:</li>
14
+
</ol>
15
+
<prelanguage="razor"><div>
16
+
<h3>Child</h3>
17
+
<div>Value: @Value</div>
18
+
</div>
19
+
20
+
@code {
21
+
[Parameter]
22
+
public int Value { get; set; }
23
+
}</pre>
24
+
<olstart="2">
25
+
<li>From the parent, pass the parameter to the child:</li>
<p>Developers can enforce the requirement of a parameter using the <code>[EditorRequired]</code> attribute:</p>
46
+
<prelanguage="razor">@code {
47
+
[EditorRequired]
48
+
[Parameter]
49
+
public int Value { get; set; }
50
+
}</pre>
51
+
<p>If the parent component omits the <code>Value</code> parameter when using the child component, Visual Studio displays a warning or error message during development.</p>
<p>When a parameter is passed from the parent to the child component, it actually creates 2 copies - one at the parent and one at the child component. Because they are different properties, any changes to the property in the child component will not reflect in the parent component unless a notification is made to the parent component. Consider the following example:</p>
<p>In this example, you can see both values at the parent and the child component. When the "Change Value" button in the child component is clicked, the value in the child component changes but not in the parent component.</p>
<p>To make the parent acknowledge the new value from the child component, a notification mechanism must be implemented. There are 2 mechanisms that provide the notification back to the parent: the <code>bind</code> keyword and <code>EventCallback</code>.</p>
93
+
<ul>
94
+
<li>The <code>bind</code> keyword is the minimal code, and changes are notified automatically.</li>
95
+
<li><code>EventCallback</code> requires more code setup but allows developers to notify changes when needed.</li>
96
+
</ul>
97
+
<hrclass="my-4" />
98
+
<h1>Passing a Parameter and Notifying the Parent With <code>@bind-*</code></h1>
99
+
<p>To implement the binding mechanism, in the child component, declare an additional property with type <code>EventCallback<T></code> where <code>T</code> is the data type of the property you want to notify. The name of this <code>EventCallback<T></code> must be the name of the property with the suffix <code>Changed</code>. For example, if the property you want to notify is<code> int Value</code>, then there must be a property <code>EventCallback<int> ValueChanged</code> with the <code>[Parameter]</code> attribute:</p>
public EventCallback<int> ValueChanged { get; set; }
112
+
}</pre>
113
+
<p>When the value changes in the child component, it is not required to change the property of the child component as it will cause overhead since the child component will be re-rendered by the parent component. Instead, just use the <code>EventCallback<T></code> to notify the parent about the changes:</p>
<blockquote><strong>Note:</strong> With every parameter in the child component, you need an additional property declared. With this approach, each change from the child component will notify the parent component, even if there may still be changes from other properties of the child component. When it is costly to re-render the parent, consider using the <code>EventCallback</code> approach to notify for the whole component’s changes instead of each property in the component.</blockquote>
157
+
<hrclass="my-4" />
158
+
<h1>Advanced Techniques with <code>@bind-*</code></h1>
159
+
<p>When passing a parameter to the child component, developers can combine modifiers <code>get</code>, <code>set</code>, and <code>after</code> with the <code>bind</code> keyword to inject logic when getting the parameter value (<code>get</code>), when setting the parameter value (<code>set</code>), or after the parameter value has been set (<code>after</code>). Consider the following changes count example:</p>
<blockquote><strong>Note:</strong> When using asynchronous logic in binding modifiers like <code>@bind-Value:set</code> or <code>@bind-Value:after</code> (e.g., <code>SetParentValueAsync</code> or <code>AfterSetParentValueAsync</code> with a 1 second delay), a lock-screen feature should be implemented. This is critical because the UI may update without user interaction after a delay, potentially confusing users, as demonstrated in the example.</blockquote>
207
+
<hrclass="my-4" />
208
+
<h1>Passing a Parameter and Notifying the Parent with <code>EventCallback</code></h1>
209
+
<p>Notifying a parent component of multiple parameter changes in a child can lead to performance issues if done per parameter, as each notification triggers a re-render. Using a single EventCallback to handle all changes at once is a more efficient approach.</p>
210
+
<ol>
211
+
<li>Define the event argument.</li>
212
+
</ol>
213
+
<prelanguage="csharp">public record ChildComponentChangeArgument(int Value1, int Value2, int Value3);
214
+
</pre>
215
+
<olstart="2">
216
+
<li>Declare the parameters and an <code>EventCallback<ChildComponentChangeArgument></code> in the child component.</li>
217
+
</ol>
218
+
<prelanguage="razor">@code {
219
+
[Parameter]
220
+
public int Value1 { get; set; }
221
+
222
+
[Parameter]
223
+
public int Value2 { get; set; }
224
+
225
+
[Parameter]
226
+
public int Value3 { get; set; }
227
+
228
+
[Parameter]
229
+
public EventCallback<ChildComponentChangeArgument> ComponentUpdated { get; set; }
230
+
}</pre>
231
+
<olstart="3">
232
+
<li>When updating those parameters in batch, use the <code>EventCallback<T></code> to notify the parent component:</li>
0 commit comments