Blazor学习记录三

11.自定义组件与消费端变量之间实现双向绑定

这也实现了从子组件到父组件的状态传递。

1.定义一个数据类型为T的参数。
2.再定义一个 参数名+[Changed]为名称，EventCallback结构类型的参数。注意T类型要和第一步中的参数数据类型T相同。
3.定义一个被用于元素中的C#事件触发的事件方法OnChanged，并在该事件方法中调用第2步中定义的EventCallback结构类型参数中的InvokeAsync(Text)成员方法。
4.写出元素中C#事件代码并绑定第3步中的事件方法。

注意： 3、4两步也可以以在4中写出lambda表达式的形式合成一步

这样做之后，则在组件的消费者调用端会按约定在组件内出现一个 @bind-[1步中参数名] 的绑定参数。
5. 以 @bind-[参数名]="[消费者中变量名]" 的形式将消费者变量与自定义组件的绑定参数相绑定即可。

代码如下：

• 自定义组件代码：

<input type="text" value="@Text" @onchange="Onchanged" />
@code
{
    [parameter]public string? Text {get;set;}
    [parameter]public EventCallback<string?> TextChanged {get;set;}
    Task Onchanged(ChangeEventArgs e)
    {
        Text = e.Value?.ToString();
        TextChanged.InvokeAsync(Text);
        return Task.CompletedTask;
    }
}

• 消费者代码或说调用者代码：

@page "/custom-bind"
<CustomComponent @bind-Text="ConsumerVariate" />
<h3>@ConsumerVariate<h3>
@code
{
    string? ConsumerVariate {get;set}
}