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>