Blazor WASM passing values between components - blazor-webassembly

Question

I started with the default app microsoft provides. I took the counter and made a decrease and increase count on the same page. Increase and decrease are child components that are placed inside Counter which is the parent component that just displays the current count. What I was is for the currentCount value to be updated when you hit one of the buttons which are the 2 child components I just mentioned.
I tried looking into state and it seems like way to much work for what I am doing and remember I have no back end.
Here is Counter component or parent comp.
#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;}
}
Decrease count child comp.
<button class="btn btn-secondary" #onclick="decreaseCount">Decrease</button>
#code {
[Parameter]
public int currentCount {get;set;}
public void decreaseCount() {
currentCount--;
}
}
And increase child comp
<button class="btn btn-primary" #onclick="IncrementCount">Increase</button>
#code {
[Parameter]
public int currentCount {get;set;}
private void IncrementCount() {
currentCount++;
}
}

Answer 1

You're very close!
You are initializing the parameters in each control, but the parameters are not bound. I'm not sure if Blazor has introduced a shorthand version for event wiring yet, but the following should work. Note that there's a VERY high chance that Visual Studio will complain that it cannot convert among callback types-- if so, ignore it.
Note also that the EventCallback's name must be EXACTLY the parameter's name with the word "Changed" added to it for it to work:
Main control:
<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);
}
}
I don't know who Peter Morris is or why he made the following site for free, but it's where I first learned about event wiring in a way that made sense to me.
https://blazor-university.com/components/two-way-binding/