Blazor WASM 在组件之间传递值答案

【问题标题】：Blazor WASM passing values between componentsBlazor WASM 在组件之间传递值
【发布时间】：2021-06-08 12:34:24
【问题描述】：

我从微软提供的默认应用开始。我拿起柜台，在同一页上减少和增加计数。增加和减少是放置在 Counter 内的子组件，它是仅显示当前计数的父组件。当您点击我刚才提到的 2 个子组件中的一个按钮时，我的做法是更新 currentCount 值。我尝试调查状态，这似乎对我正在做的事情有很多工作，并且记住我没有后端。

这里是 Counter 组件或父组件。

@page "/counter/{currentCount:int}"


<h3>Counter</h3>
<p>Current count: @currentCount</p>
<Decrease currentCount = "@currentCount"></Decrease>
<Increase currentCount = "@currentCount" ></Increase>

@code {

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

}

减少子组件计数。

<button class="btn btn-secondary" @onclick="decreaseCount">Decrease</button>

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

    public void decreaseCount() {
        currentCount--;
    }
}

并增加儿童补偿

<button class="btn btn-primary" @onclick="IncrementCount">Increase</button>

@code {
    [Parameter]
    public int currentCount {get;set;}
    
    private void IncrementCount() {
        currentCount++;
    }
}

【问题讨论】：

标签： blazor-webassembly

【解决方案1】：

你很亲密！

您正在初始化每个控件中的参数，但参数未绑定。我不确定 Blazor 是否已经引入了事件连接的速记版本，但以下应该可以工作。请注意，Visual Studio 很有可能会抱怨它无法在回调类型之间进行转换——如果是这样，请忽略它。

另请注意，EventCallback 的名称必须与参数名称完全相同，并添加“已更改”一词才能使其工作：

主控：

<h3>Counter</h3>
<p>Current count: @currentCount</p>
<Decrease @bind-currentCount="@currentCount"></Decrease>
<Increase @bind-currentCount="@currentCount"></Increase>

@code {
    public int currentCount { get; set; }
}

Decrease.razor

<button class="btn btn-secondary" @onclick="decreaseCount">Decrease</button>

@code {
    [Parameter]
    public int currentCount { get; set; }
    [Parameter]
    public EventCallback<int> currentCountChanged { get; set; }

    private async Task decreaseCount()
    {
        currentCount--;
        await currentCountChanged.InvokeAsync(currentCount);
    }
}

Increase.razor

<button class="btn btn-primary" @onclick="IncrementCount">Increase</button>

@code {
    [Parameter]
    public int currentCount { get; set; }
    [Parameter]
    public EventCallback<int> currentCountChanged { get; set; }

    private async Task IncrementCount()
    {
        currentCount++;
        await currentCountChanged.InvokeAsync(currentCount);
    }
}

我不知道 Peter Morris 是谁，也不知道他为什么免费制作以下网站，但这是我第一次以一种对我有意义的方式了解事件连接的地方。

https://blazor-university.com/components/two-way-binding/

【讨论】：