Blazor中如何在父子组件之间实现参数的同步刷新

1.问题

在上一篇参数和级联参数中，我们了解了参数的使用，但是那个主要是单向的。

假设有下面两个组件:：

1. 子组件Counter，她接受一个参数，并且在每次点击按钮的时候给参数加1。

<h3>Child Count: @CurrentCounth3>
<button class="btn btn-primary" @onclick="IncrementCount">Child Addbutton>

@code {
    [Parameter]
    public int CurrentCount { get; set; }

    private void IncrementCount()
    {
        CurrentCount++;
    }
}

2. 父组件CounterContainer，调用子组件Counter，传递当前的Counter。同样也包含一个按钮，每次点击都给参数加1。

<h3>Parent Count: @currentCounth3>
<button class="btn btn-primary" @onclick="IncrementCount">Parent Addbutton>

<Counter CurrentCount="currentCount">Counter>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

她们的运行情况会怎样呢？父组件和子组件会一起更新吗？答案是否定的，请看下图：

父组件的操作会更新子组件，但是子组件的操作并不会引起父组件的更新，那应该如何做才能实现同步更新呢？

2.解决方案

Blazor提供了@bind指令来实现我们的要求，她可以将两个组件的参数关联起来。

首先修改父组件，将调用方法由：

<Counter CurrentCount="currentCount">Counter>

改成：

<Counter @bind-CurrentCount="currentCount">Counter>

其实就是在参数前加上@bind-修饰符。

然后修改子组件，如下：

    [Parameter]
    public int CurrentCount { get; set; }

    [Parameter]
    public EventCallback CurrentCountChanged { get; set; }

    private void IncrementCount()
    {
        CurrentCount++;
        this.CurrentCountChanged.InvokeAsync(this.CurrentCount);
    }

• 加多了一个事件参数CurrentCountChanged，这个事件的前缀必须和参数名保持一致。
• 加多了一句this.CurrentCountChanged.InvokeAsync(this.CurrentCount)来手动触发该事件。

似乎有些麻烦，不过笔者暂时也没找到其他办法.

效果如下：