Пример. `EventCallback` Привязка с помощью параметров компонентов

Привязка в два направления.
Управление данными в компоненте наследнике из компонента "Предка", так и из ком-на Наследника в ком-те предка.
Делегат обработчика привязанных событий -"EventCallback<int>", см.подробнее о EventCallback


Parent Component

Parent year: 1979

ChildBind Component

Child Year: 1979


Исходный код
-------------------------Pages\BindParam\ChildBind.razor................Наследник

        
<div class="card bg-light mt-3" style="width:18rem ">
    <div class="card-body">
        <h3 class="card-title">ChildBind Component</h3>
        <p class="card-text">
            Child <code>Year</code>: @Year
        </p>
        <button @onclick="UpdateYearFromChild">J=</button>
    </div>
</div>

@code {
    private Random r = new();

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

    //Обязательное условие для имени свойства EventCallback: оно должно сотоять, из имени привязываемого свойства [Parameter] `Year` и слова `Changed`
    [Parameter]  public EventCallback<int> YearChanged { get; set; }


    private async Task UpdateYearFromChild()
    {
		//YearChanged.InvokeAsync вызывает делегат, связанный с привязкой с указанным аргументом, и отправляет уведомление о событии 
        await YearChanged.InvokeAsync(r.Next(1950, 2021));
    }
}


..............................Pages/BindParam/Parent.razor:................Предок



@page "/Parent"

<h1>Parent Component</h1>

<p>Parent <code>year</code>: @year</p>

<button @onclick="UpdateYear">Обновлён компонент родитель<code>year</code></button>

@*Запись эквивалентна следующей. <ChildBind @bind-Year="year" @bind-Year:event="YearChanged" />*@
<ChildBind @bind-Year="year" />

@code {
    private Random r = new();

    //year привязано к параметру Year дочернего компонента. 
    private int year = 1979;

    private void UpdateYear()
    {
        year = r.Next(1950, 2021);
    }
}

        
An error has occurred. This application may no longer respond until reloaded. Reload 🗙
Web hosting by Somee.com