Blazor-父子组件传值
父组件传值给子组件
在子组件中可以使用[Parameter]特性将组件中的属性暴露出来，让调用方可以控制特性所标记的属性的值，在调用方可以直接传具体的值，也可以传变量，这里我们传入变量就可以完成父组件给子组件传值的操作，示例如下： 子组件：
<p>子组件中的Info：@Info</p>
@code {
[Parameter]
public string? Info { get; set; }
}父组件：在父组件中引用子组件
@page "/demoPage"
<h3>DemoPage</h3>
<Subassembly Info="@info"></Subassembly>
<button @onclick="UpdateInfo">Update Info</button>
@code {
private string info = "1";
private void UpdateInfo()
{
info = "2";
}
}我们将父组件中的字段info传入了子组件，并添加了按钮用于更新父组件中的info值。按照我们的预期，应该首先显示的info为1，点击按钮后为2 初始显示：
点击按钮后：
结果和我们的预期一致，下来我们看看怎么子组件给父组件传值
子组件传值给父组件
子组件传值给父组件的思路类似于委托，事件回调的思想。在Blazor中做了一个规范的要求，让我没来进行传值。 需要用到@bind指令和EventCallback类型来实现，我们看看代码示例 子组件：我们在子组件中添加了按钮并执行回调方法。
<p>子组件中的Info：@Info</p>
<button @onclick="UpdateChildInfo">Update Info</button>
@code {
[Parameter]
public string? Info { get; set; }
[Parameter]
public EventCallback<string> InfoChanged{ get; set; }
private async Task UpdateChildInfo(){
await InfoChanged.InvokeAsync("50");
}
}定义的 InfoChanged 是 EventCallback类型的属性，其中的 string 与 Info 属性的类型必须一致，使用[Parameter]标注，表示公开的参数属性。
按照 Blazor约定，EventCallback类型的参数属性(InfoChanged)必须以要传递的参数属性(Info)命名，并带有“Changed”后缀。 其命名语法为：{参数属性名}Changed，如 InfoChanged，与Info 参数属性关联，使用InfoChanged.InvokeAsync()修改的是 Info 的值。
父组件：父组件中使用了@bind-Info标签
@page "/demoPage"
<h3>DemoPage</h3>
<Subassembly @bind-Info=info></Subassembly>
<p>父组件中的info：@info</p>
@code {
private string info = "1";
}上述的代码，在我们点击子组件中的按钮后，执行更新方法，可以改变父组件中info的值。我们来试试结果。 点击前：
点击按钮后：
我们从运行的结果可以看到，父组件中的值被修改了。
@bind-xxx:after
在我们完成参数传递之后，还可以继续执行after方法来进行后续的操作。我们在父组件中添加了@bind-Info:after=ShowInfo，让传递成功后执行ShowInfo()方法，显示传递成功
@page "/demoPage"
<h3>DemoPage</h3>
<Subassembly @bind-Info=info @bind-Info:after=ShowInfo></Subassembly>
<p>父组件中的info：@info</p>
<p>父组件信息：@successInfo</p>
@code {
private string info = "1";
private string? successInfo;
private void ShowInfo(){
successInfo = "传递成功";
}
}点击前：
点击后：
Q 这时候就有人说了，那我不使用@bind-Info，我在子组件的暴漏的属性中传入父组件的info变量，之后在子组件中直接进行修改，那么会影响父组件的值吗？我们写个例子试试，看看结果。 子组件：
<p>子组件中的Info：@Info</p>
<button @onclick="UpdateInfo">Update Info</button>
@code {
[Parameter]
public string? Info { get; set; }
public void UpdateInfo(){
Info = "100";
}
}父组件：
@page "/demoPage"
<h3>DemoPage</h3>
<Subassembly Info="@info"></Subassembly>
<p>父组件info:@info</p>
@code {
private string info = "1";
}我们在父组件中传递了info，与子组件建立联系，之后修改info的值，我们看看父组件中的info是否会被修改 点击前：
点击后：
我们发现父组件中的值没有被修改，仅仅被修改了子组件中的值。 运行证明不使用@bind-Info，我在子组件的暴漏的属性中传入父组件的info变量，之后在子组件中直接进行修改，不会影响父组件的值。
腾讯云开发者
