Blazor双向绑定

基本的双向绑定：您可以使用 @bind 指令将组件的属性与用户界面元素的属性进行绑定。这是一个文本框的例子：

<input type="text" @bind="myValue" />
<p>You entered: @myValue</p>
 
@code {
    private string myValue = "Initial Value";
}

在这个示例中，myValue 字符串与文本框的值双向绑定。当用户更改文本框的值时，myValue 将自动更新，反之亦然。

复杂对象的双向绑定：您也可以在 Blazor 中实现复杂对象的双向绑定，例如表单输入与数据模型。这是一个表单的例子：

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" @bind="person.Name" />
 
    <label for="age">Age:</label>
    <input type="number" id="age" @bind="person.Age" />
 
    <button type="submit">Submit</button>
</form>
 
<p>Name: @person.Name</p>
<p>Age: @person.Age</p>
 
@code {
    private Person person = new Person();
 
    public class Person
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }
}

在这个示例中，@bind 用于将输入框的值与 person 对象的属性进行双向绑定，以便在表单提交时，person 对象中的属性会更新。

自定义组件中的双向绑定：您还可以在自定义组件中使用双向绑定。这是一个自定义组件的示例：

<!-- ParentComponent.razor -->
<MyCustomComponent @bind-MyValue="parentValue" />
 
<p>Parent Value: @parentValue</p>
 
@code {
    private string parentValue = "Parent Initial Value";
}
 
<!-- MyCustomComponent.razor -->
<input type="text" @bind="MyValue" />
 
@code {
    [Parameter]
    public string MyValue { get; set; }
}

在这个示例中，@bind-MyValue 用于在父组件中与 MyCustomComponent 组件的属性进行双向绑定。