Component Page

<div>
    CurrentCounterValue in MyFirstComponent is @CurrentCounterValue
</div>
<button @onclick=@UpdateCurrentCounterValue>Update</button>
@code {
    [Parameter]
    public int CurrentCounterValue { get; set; }

    [Parameter]
    public EventCallback<int> CurrentCounterValueChanged { get; set; }

    async Task UpdateCurrentCounterValue()
    {
        CurrentCounterValue++;
        await CurrentCounterValueChanged.InvokeAsync(CurrentCounterValue);
    }
}

Index Page

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

<MyFirstComponent @bind-CurrentCounterValue=currentCount />

@code {
    private int currentCount = 0;

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

Sources:

Last modified: November 20, 2020

Author

Comments

Write a Reply or Comment