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<string>

的事件。

[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;}
           

你学会了吗？