Blazor —— 让自定义组件也能拥有双向绑定功能

前言

内置的 Input 控件是一个双向绑定控件，我们使用 @bind-Value 就可以对文本框的 Value 进行双向绑定的实现。那我们可以自定义这种双向绑定组件吗？当然可以。

示例场景

很简单的需求，当点击按钮后，显示选择的水果名称。

这个是水果按钮组的代码：

<div class="btn-group">
    @foreach (var item in Fruits)
    {
        <button class="btn @(ActiveButton(item))" @onclick="e=>NameChanged.InvokeAsync(item)">@item</button>
    }
</div>
@code{
    List<string> Fruits = new List<string>
	{
        "苹果","香蕉","菠萝"
    };

    [Parameter]
    public string Name { get; set; }
    [Parameter]
    public EventCallback<string> NameChanged { get; set; }

    string ActiveButton(string name)
    => Name == name ? "btn-primary active" : "btn-outline-primary ";
}

这里是双向绑定代码：

<FruitsRadio @bind-Name="FruitName"/>
<strong>
    你选择是：@FruitName
</strong>

@code{
    string FruitName { get; set; }
}

我们在调用这个组件的时候用到了 bind-Name 的双向绑定，和之前的 InputText 组件的 bind-Value 有点像，这是怎么实现的呢？

答疑

FruitRadio 组件

ActiveButton 是一个方法，就是点击的时候更换样式，这个很容易理解。

重点在两个对外公布的参数 Name 和 NameChanged 上。如果要做双向绑定，需要符合以下格式：

[Parameter]
public [DataType] [PropertyName] { get; set; }

[Parameter]
public EventCallback<[DataType]> [PropertyName]Changed { get; set;}

就比如上面的例子，双向绑定参数是 Name ， 数据类型是 string，因此就需要再定义一个 NameChanged 的 EventCallback 的事件。

   [Parameter]
   public string Name { get; set; }
   
   [Parameter]
   public EventCallback<string> NameChanged { get; set; }

最后，触发按钮点击事件 onclick，然后触发了 NameChanged 事件，传入改变后的值，内部机制就会将新值覆盖到 Name 参数上。

调用组件

在调用组件时，使用 @bind-[PropertyName]，而 VS 的 IDE 会给你提示的

然后绑定到你的一个接收的属性或变量上，在输出即可。

总结

给组件定义符合以下规范的两个参数，就可以对这个属性进行双向绑定操作：

[Parameter]
public [DataType] [PropertyName] { get; set; }

[Parameter]
public EventCallback<[DataType]> [PropertyName]Changed { get; set;}

你学会了吗？