Blazor WASM 在组件之间传递值

Posted 2023-03-27

【中文标题】Blazor WASM 在组件之间传递值

【英文标题】：Blazor WASM passing values between components

【发布时间】：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++;
    

【参考方案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/