Blazor中bind指令的使用

在上一篇中, 第一次用到了@bind指令，她主要用来做数据绑定，有以下几种使用方式：

• @bind
• @bind:event
• @bind-{参数名或属性名}
• @bind-{参数名或属性名}:event

bind是区分大小写的，所以只能用小写的bind，不能用BIND等其他形式

具体怎么用？ 我们一个一个看。

1. @bind

@bind主要用来实现双向绑定，比如如下代码：

<h3>Page:Bind Sample</h3>

双向：<input type="text" @bind="text" /><br />
单向：<input type="text" value="@text" /><br />
<button @οnclick="@(()=>
                    this.text=""
        )">Reset</button>

@code {
    private string text;
}

@bind=“text"可以实现双向绑定，但是value=”@text"的方式只能单向，需要注意的是@bind只能应用在表单控件上，效果如下：

该示例当中，text的值只有当焦点离开文本框的时候才会变更，这也是blazor的默认行为，如果需要其他事件则需要使用下一个指令。

2. @bind:event

该指令用来设定触发值改变的事件，默认是onchange，你可以根据需要设成其他值，比如oninput，这样就可以在每次输入的时候自动更新对应的值。

<input type="text" @bind="text" @bind:event="oninput"/>

完整的事件列表可以参考官方文档。

3. @bind-{参数名或属性名}

该指令我们在上一篇中已经使用过了，通过她可以实现组件参数之间的双向绑定，首先要在父组件使用@bind-CurrentCount="currentCount"来绑定参数，然后在子组件要声明事件：

[Parameter]
public EventCallback<int> CurrentCountChanged { get; set; }

同时还要完成显式调用，到这里其实应该明白为什么事件的名称要用CurrentCountChanged了,因为bind指令默认关联的就是chang事件。

4. @bind-{参数名或属性名}:event

同@bind:event一样，其实也是修改默认的事件，我们就可以把上一篇的例子做一个修改，对于子组件，我们可以把参数改为：

    [Parameter]
    public EventCallback<int> CurrentCountIncrement { get; set; }

父组件可以改为:

<Counter @bind-CurrentCount="currentCount" @bind-CurrentCount:event="CurrentCountIncrement"></Counter>

注意这时候event的名字就要使用完整的名字了，看来还是使用Changed更简洁，除非你有特殊的需求。

5. 谜之操作!!

根据官方的说明，这里的@bind-后面还可以跟属性名字，以下是他们的例子：

<p>
    <input type="text" @bind="paragraphStyle" />
</p>
<p @bind-style="paragraphStyle" @bind-style:event="onchange">
    Blazorify the app!
</p>
@code {
    private string paragraphStyle = "color:red";
}

看起来很奇怪，P标签作为非输入标签，根本不需要双向绑定，而且这里的@bind-style:event还不能去掉。

把代码改成以下形式，效果也是一样的：

<p style="@paragraphStyle" >
    Blazorify the app!
</p>

谜之操作!!