blazor组件开发中的双向绑定

在 Blazor 组件设计中，双向绑定（Two-way Binding）是指组件的属性和 UI 控件之间的数据可以互相同步：

• 当 UI 控件的值发生变化时，属性值会自动更新；
• 当属性值发生变化时，UI 控件的显示也会自动更新。

---

目的和意义

1. 简化数据同步：开发者无需手动编写事件处理代码来同步数据，提升开发效率。
2. 提升用户体验：数据和界面实时同步，用户操作更流畅。
3. 减少样板代码：避免重复的赋值和事件处理逻辑，代码更简洁易维护。
4. 父子组件通信：支持父组件和子组件之间的数据双向流动，便于组件复用和组合。

---

语法

1. 基本语法（表单控件）

使用 @bind-属性名 语法：

<input @bind="变量名" />

等价于：

<input value="@变量名" @onchange="@(e => 变量名 = e.Value.ToString())" />

2. 组件参数双向绑定

• 子组件参数需用 [Parameter] 和 EventCallback<T> 配合。
• 父组件用 @bind-参数名 语法。

---

样例

1. 普通控件双向绑定

@page "/bind-demo"

<h3>双向绑定示例</h3>
<input @bind="name" />
<p>你输入的是：@name</p>

@code {
    private string name = "";
}

---

2. 组件参数双向绑定

子组件（MyInput.razor）

<input value="@Value" @oninput="OnInputChanged" />

@code {
    [Parameter]
    public string Value { get; set; }

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

    private async Task OnInputChanged(ChangeEventArgs e)
    {
        var newValue = e.Value?.ToString();
        // 通知父组件更新绑定值
        await ValueChanged.InvokeAsync(newValue);
    }
}

父组件使用

<MyInput @bind-Value="parentValue" />
<p>父组件值：@parentValue</p>

@code {
    private string parentValue = "";
}

---

总结

• 双向绑定让数据和界面自动同步，简化开发。
• 常用于表单、输入控件、父子组件通信等场景。
• 语法简单，易于维护和扩展。

如需更复杂的双向绑定示例或自定义组件绑定方式，可继续提问。